Game Development Reference
In-Depth Information
Part of the HTML5 logo drawn inside a canvas rendering context, with some intentional stretching.
Manipulating pixels
Now that we know how to draw images into a canvas, let's take things to the next
step, and work with the individual pixels drawn in the canvas. There are two func-
tions that we can use in order to accomplish this. One function allows us to retrieve
the pixel data from the canvas context, and the other lets us put a pixel buffer back
into the canvas context. Additionally, there is a function that allows us to retrieve the
pixel data as a data URL, meaning, that we can save the image data from the can-
vas right to the user's file system, just as we can with a regular image from an <img
/> tag.
ctx.fillStyle = "#fff";
ctx.fillRect(0, 0, canvas.width, canvas.height);
var img = new Image();
img.onload = function(){
Search WWH ::




Custom Search