The canvas tag HTML5

The <canvas> tag sets up a portion of the screen for program-controlled graphics.
The HTML simply sets aside a portion of the screen to be used as a canvas.
All the drawing and manipulation of the image is done through JavaScript code.
The following HTML code sets up a canvas element and provides a button.

<canvas id = “myCanvas”
width = “300”
height = “200”>
This example requires HTML5 canvas support
</canvas>
<button type = “button”
onclick = “draw()”>
click me to see a drawing
</button>



The canvas element does little on its own. To do anything interesting with the
canvas tag, use JavaScript to extract a drawing context (a special element that
can be drawn on) and use the methods of that context object to create dynamic
graphics. For example, here is the draw() function that will be enabled when
the user clicks the button

function draw(){
var myCanvas = document.getElementById(“myCanvas”);
var context = myCanvas.getContext(“2d”);
context.fillStyle = “blue”;
context.strokeStyle = “red”;
circle(context, 1, 1, 1);
for (i = 1; i <= 200; i+= 2){
circle(context, i, i, i, “blue”);
circle(context, 300-i, 200-i, i, “red”);
circle(context, 300-i, i, i, “blue”);
circle(context, i, 200-i, i, “red”);
} // end for
} // end draw
function circle(context, x, y, radius, color){
context.strokeStyle = color;
context.beginPath();
context.arc(x, y, radius, 0, Math.PI * 2, true);
context.stroke();
} // end circle