SVG stands for scalable vector graphics. It’s a text based graphic language which draws images using text, lines, dots etc. This makes it lightweight and renders faster.
Can we see a simple example of SVG using HTML 5?
Let’s say we want to display the below simple line using HTML 5 SVG.
Below is how the code of HTML 5. You can see the SVG tag which encloses the polygon tag for displaying the star image.
What is canvas in HTML 5?
Canvas is an HTML area on which you can draw graphics.
So how can we draw a simple line on Canvas?
- Define the Canvas area.
- Get access to canvas context area.
- Draw the graphic.
So to define canvas area you need to use the below HTML code. This defines the area on which you can draw.
Get access to canvas area
To draw on the canvas area we need to first get reference of the context section. Below is the code for canvas section.
Now once you have access to the context object we can start drawing on the context. So first call the “move” method and start from a point , use line method and draw the line and then apply stroke over it.
Below is the complete code.
You should get the below output.