html5-canvas Getting started with html5-canvas Off screen canvas
Example
Many times when working with the canvas you will need to have a canvas to hold some intrum pixel data. It is easy to create an offscreen canvas, obtain a 2D context. An offscreen canvas will also use the available graphics hardware to render.
The following code simply creates a canvas and fills it with blue pixels.
function createCanvas(width, height){
var canvas = document.createElement("canvas"); // create a canvas element
canvas.width = width;
canvas.height = height;
return canvas;
}
var myCanvas = createCanvas(256,256); // create a small canvas 256 by 256 pixels
var ctx = myCanvas.getContext("2d");
ctx.fillStyle = "blue";
ctx.fillRect(0,0,256,256);
Many times the offscreen canvas will be used for many tasks, and you may have many canvases. To simplify the use of the canvas you can attach the canvas context to the canvas.
function createCanvasCTX(width, height){
var canvas = document.createElement("canvas"); // create a canvas element
canvas.width = width;
canvas.height = height;
canvas.ctx = canvas.getContext("2d");
return canvas;
}
var myCanvas = createCanvasCTX(256,256); // create a small canvas 256 by 256 pixels
myCanvas.ctx.fillStyle = "blue";
myCanvas.ctx.fillRect(0,0,256,256);
