Canvas Demo

by Prasad

HTML

<body onLoad="canvasSupoort()">
<canvas id="canvasDemo" width="300" height="500">
</canvas>
</body>

CSS

canvas {
	border: 1px solid #eee;
}

JavaScript

var canvas, ctx;

function canvasSupoort() {
	canvas = document.getElementById('canvasDemo');
	var whiteC="white";
	if(canvas.getContext) {
		/*alert("Browser Supports Canavas");*/	
		ctx = canvas.getContext('2d');
		
		/*Arcs*/	
		ctx.fillStyle="red";
		ctx.beginPath();	
		ctx.arc(150,210,50,0,Math.PI*2,true);
		ctx.moveTo(140,190);
		ctx.arc(135,190,10,0,Math.PI*2,true);
		ctx.fillStyle="#fff";
		ctx.fill();
		ctx.moveTo(170,190);
		ctx.arc(165,190,10,0,Math.PI*2,true);
		
		ctx.fillStyle="#fff";
		ctx.fill();
		ctx.moveTo(120,215);
		ctx.arc(150,215,30,0, Math.PI, false);
		
		ctx.closePath();
		ctx.fillStyle="#CC9C94";
		ctx.fill();
	}
	else {
		/*alert("Browser Does Not Supports Canavas");*/
	}	
	console.log(canvas);
}