Create the Canvas
You can create a canvas element with <canvas> opening and ending tags just like other html elements:
you can also specify the height and width for the canvas element:
<canvas id="mycanvas" height="400px width="500px"></canvas>
Start with canvas
var objCanvas = document.getElementById("myCanvas");
var objContext = objCanvas.getContext("2d");
now you can work with the canvas, draw lines and shapes etc.
Canvas element has the two-dimensional coordinate system. The starting point will be (0,0) at the upper left corner( see the figure 1).
We draw any shape according to these coordinates to specify the location and size.
Start with Rectangle
To understand the coordinate system of the canvas, we will see how to draw and fill a rectangle shape on the canvas.
Suppose we want to draw a rectangle with height of 200 and width of 300 on the location (50,50).
To Draw a filled rectangle:
To Draw a rectangular outline:
And full program is:
and Output will be:
This is basic explanation of the canvas element. For better understand go through next articles.