12-09-2011

Javascript Canvas getContext

HTML5 has introduced the new canvas element, which allows us to generate graphics dynamically with the help of Javascript. To draw on a canvas element we must first specify a 'context' in which to work. This is done using the getContext method. Below a quick example:

var canvas1 = document.getElementById('canvas1');
if (canvas1.getContext){
	var cntxt = canvas.getContext('2d');
 
	//draw a little circle
	cntxt.beginPath();
	cntxt.arc(50,50,40,0,2*Math.PI,false)
	cntxt.fill();
 
}else{
	//fallback code for browsers not supporting the canvas element
}

Find other Canvas methods on https://developer.mozilla.org/en/Canvas_tutorial

<canvas id="canvas1" width="100" height="100"></canvas>
Keywords: canvas

Comments:

Your comment:

»

 

[x]