Sponsored

Not the solution you were looking for?

We’ll help you out!

A Beginners guide to HTML5 Canvas – Draw Line

Once I happened to attend HTML5 Event in India and then, I started realizing the power of HTML5. I wish to write lot of HTML5 tutorials, but today we learn about HTML5 Canvas element and how to draw a line using it.

The Canvas element is similar to any other HTML tag like <p>, <span> etc…But the contents of Canvas is rendered with JavaScript. It means, the Canvas tag is created anywhere in the HTML document, referenced in JavaScript, a context is created and a visual object is drawn; such line, circle, arc, square, rectangle, triangle, curves, corners, images etc…It also helps you to decorate the drawn objects by filling colors, gradients, patterns, cropping images, resizing etc…

Canvas Element and Canvas Context

I spoke about Canvas Element and then said Create Canvas context isn’t? To make it simple, both are required and there is a difference between them as well. Canvas Element is the DOM node that is placed in HTML page as below.