10 Jul HTML5 Canvas

If you want to draw graphics on a web page, use the HTML5 canvas element. The canvas element is a new element added in HTML 5.

Apple introduced canvas in 2004, initially for using it inside their Mac OS X WebKit component.

With canvas, you can draw awesome graphics, decorative images, games, etc.

Here, we will see an example to draw a line, text, etc.

Example

Here’s the output,

Above, you can see a canvas with id, height and width. These attributes are essential to add. We also added style, with border and border color.

Now, we will see how to create a circle with canvas. Here, we’re using arc() function to create a circle.

Here’s the output,

Now, we will see how to create a line. Here, we’re using lineTo() function to create a line,

Here’s the output, showing line drawn with canvas,

Another example demonstrates how to create a straight line with HTML5 canvas easily. We’re using the same method used above, but we edited the values to form it in the form of a line.

Here’s the output, showing straight line drawn with canvas,