Reading and processing images and videos using Canvas.

Mozilla Developer site has a good introduction to Manipulating video using canvas

One of the powerful features of Canvas is that after an image is created …

var canvas = document.getElementById(“area”);
var context = canvas.getContext(“2d”);
var image = document.getElementById(“canvasSource”);
context.drawImage(image, 0, 0);

… it can be read …


… then the data changed pixel by pixel. This gives web pages the same type of image processing as desktop graphics programs have. The data is broken down in to four channels, Red, Green, Blue and alpha. A green screen effect or chroma-keying is done in Mozilla’s example using a video element as a source.

There are a few security restrictions on the getImageData function. The image or video must come from the same domain as page. It does not operate from a local html file on ones own computer it must be served by an http server. Therefore for development a http://localhost is needed.

HTML5doctor has several effects on their Video + canvas = magic first changing the colors to gray scale and second a emboss effect for video … with examples. The math used to create a gray scale is technically more accurate at … the luminance formula: red x 0.3 + green x 0.59 + blue x 0.11.


One response

  1. […] used to animate color be calculating the between color values and writing each frame on any object. Canvas is an ideal choice to transform colors in this method because the methods used are standardized. […]

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: