Create HTML Canvas:
Understanding Canvas Coordinates:
The term canvas is a two-dimensional rectangular area. The coordinates of the top-left corner of the canvas are (0, 0) which is known as origin, and the coordinates of the bottom-right corner are (canvas width, canvas height).
If you want to draw a circle on the canvas, you can use the arc() method:
use one of the ink() methods, like stroke() or fill():
Draw Line on Canvas:
If you want to draw a straight line on the canvas, you can use the following two methods.
moveTo(x,y): It is used to define the starting point of the line.
lineTo(x,y): It is used to define the ending point of the line.
If you draw a line which starting point is (0,0) and the end point is (250,150), use the stroke method to draw the line.
The Rendering Context:
Applying Styles and Colors on Stroke:
Applying Styles and Colors on Stroke The default color is black and its thickness is one pixel. But, you can set the color and width of the stroke using the stroke Style and lineWidth property respectively. The example will draw an orange color line having 5 pixels width.
The latest versions of Firefox, Safari, Chrome support for HTML5 Canvas but IE8 does not support canvas natively.