Archive for the ‘canvas’ Category

Using GSAP to Animate Game UI with Canvas

Posted on: No Comments
The year was 1995; Toy Story hit the theaters, kids were obsessively collecting little cardboard circles and Kiss From a Rose was being badly sung by everyone. I was a gangly ten-year-old, and like any other relatively tall kid I was often addressed to...

Take a Selfie With JavaScript

Posted on: No Comments
In this tutorial we are going to show you how to make a JavaScript photobooth app that takes images using the camera on your phone, laptop or desktop. We will showcase a number of awesome native APIs that allowed us to make our project without any ext...

Accessing the User’s Camera with JpegCamera and Canvas

Posted on: No Comments
Over the past decade, browser vendors have introduced various new APIs that enable us as programmers to create richer and more fluent experiences. One of these is the getUserMedia API, which enables access to the user's audio and video devices. However...

A Comparison of Animation Technologies

The question I am asked most frequently: what animation tool do you recommend? Having worked with a slew of them, I can tell you there is no right answer. It's a complicated question and complicated answer. This post serves to clarify what to use, and ...

Animated Map Path for Interactive Storytelling

Posted on: No Comments
View demo Download source Today we’d like to share an experimental demo with you. This demo is an interactive map that will animate a map path while scrolling the page. The main idea is to connect the story bei...

Face Proximity Detection with JavaScript

Posted on: No Comments
Let’s suppose you'd like to let the visitors of your website make a video recording or take a picture of their face. How can you explain to them how close they're supposed to sit to the camera? You could write lengthy instructions, but you know that ...

Rain & Water Effect Experiments

Posted on: No Comments
View demo Download source Today we’d like to share some WebGL experiments with you. The idea is to create a very realistic looking rain effect and put it in different scenarios. In this article, we’ll give an overview of the general tricks...

Prism Effect Slider with Canvas

Posted on: No Comments
View demo Download source Today we’d like to show you how to build a simple slider with an interesting “prism” effect. The idea is to place a shape in front of the slider and “reflect” the images of each slide, in order t...

Resizing and Cropping Images with Canvas

Posted on: No Comments
In this tutorial we’re going to learn how to resize and crop an image using the HTML5 <canvas> element, and while we’re at it, let’s create some fancy controls for resizing, commonly seen in photo editing applications. In a real world ...