HTML 5 Canvas

by isogunro

HTML

<canvas id="drawingSurface" width="600" height="400">
    Test
</canvas>

CSS

canvas {
    border: 1px solid black;
}

JavaScript

var drawingSurface = document.getElementById("drawingSurface");
var ctxt = drawingSurface.getContext("2d");

	ctxt.beginPath();
	ctxt.arc(126,100,25,0,2*Math.PI,false);
	//ctxt.lineWidth = 0;
	ctxt.strokeStyle = 'blue';
	ctxt.stroke();

	ctxt.beginPath();
	ctxt.arc(126,175,25,0,2*Math.PI,false);
	//ctxt.lineWidth = 0;
	ctxt.strokeStyle = 'red';
	ctxt.stroke();

	ctxt.beginPath();
	ctxt.arc(126,100,25,0,2*Math.PI,false);
	//ctxt.lineWidth = 0;
	ctxt.strokeStyle = 'blue';
	ctxt.stroke();

    //RED
    ctxt.rect(90,60,70,300)
    ctxt.fillStyle = "red";
    ctxt.stroke();

    ctxt.rect(80,50,90,320)
    ctxt.stroke();