In the above example, there is no id attribute but in a practical scenario, each canvas must have an id because JavaScript will be using this id to draw the graphics.
If you are using Chrome browser or any other modern browser, you can easily find out which JavaScript files are used by the canvas to draw the graphics. Just use the developer mode(Inspect). Just right click on the browser and click on ‘inspect’ or type F12 on your browser.
SVG(Scalable vector graphics) is based on drawing objects like line, texts, circle, squares, etc.
Generally, Canvas is fast.
Generally, it is slower than Canvas.
flexibility is the key for Canvas.
SVG is also flexible depending on how you use it.
Most of the modern browsers support Canvas.
Most of the modern browsers also support svg.
Little harder to animate but libraries make this easy.
Easy to maintain and animate.
This depends on the Resolution of the device.
This does not depend on the Resolution of the device.
Games which requires high graphic can use canvas.
This is not suitable for high Graphic games but can be used in google maps as it has large rendering.
So, how do you start drawing canvas?
There are some important points which you should keep in mind while dealing with Canvas –
You should know at least the basics of JavaScript to master the Canvas. If you do not have knowledge of JavaScript, we recommend you to learn the basics of JavaScript.
Understand about the Horizontal axis(X-axis) and the Vertical axis(y-axis)
Learn about the control points, Starting Points, End Points, etc.
You should know all the important functions which help us to draw a line, a circle, arc, text, image, etc on canvas. We will show you all the important functions related to Canvas as well.
Canvas Drawing
There are multiple ways of drawing on the canvas and this depends on what you want to actually draw.
For Example, you can draw –
Rectangle
Line
Circle
Quadratic curve or Arc
Polygon
Gradient
and a lot more.
Let us see some example of canvas drawing
Canvas Examples in HTML5
We recommend you to practice all these Canvas Examples by yourself. Do not skip any information which is available here.
1. Draw rectangle in canvas
To draw a rectangle, you need to consider these steps-
Select the Canvas using its element like id. To achieve this, you can use the getElementByid() method.
As canvas is a 2d design, you need to draw a 2d object. You can use the getContext() method for this purpose.
You need to actually draw the design inside the canvas. Use the below bullet points to understand this –
You need to select a style like color, gradient, etc to the object, you can use the fillStyle property. If you do not explicitly define the fillStyle color, it will be black by default.
You should tell the browser about the Horizontal axis offset(x-offset) from left, Vertical axis offset(y-offset) from top, width, & height using the fillRect property.
Note/Info
The functions are case sensitive means 'fillStyle' function is correct name while 'fillstyle' is wrong function name.
In case of rectangle, it is important to draw the style first (using fillStyle property) before drawing the rectangle(using fillRect property).
getElementByid() and getContet() functions will be set for almost all the canvas drawings.
First, you need to include getElementById() & getContext() properties.
Next, you need to use beginPath() function to begin the path but this is optional now so you can remove it.
The next 2 important functions are moveTo(start-x-offset, start-y-offset) & lineTo(end-x-offset, end-y-offset).
Other optional properties are lineWidth, strokeStyle or lineCap properties and you can use them depending on your requirements. strokeStyle can have any color, gradient or pattern while lineCap can have any one of these values – butt, square, rounded.
And, the last one is stroke() function & this is mandatory to draw the line.
Use getElementById() & getContext() properties as always.
Next, you need to use beginPath() function to begin the path.
The next important function is arc(start-x-offset, start-y-offset, radius, start-angle, end-angle).
getIdContext1.arc(200,200,100,0,2*Math.PI);
start-angle is the center of the left area of the circle & the PI is the Math element for half of a circle, so to make a full circle, you need to give 2 * Math.PI
Similarly, you can draw arc like – 1 + Math.PI 8 – Math.PI etc
If you want to add a color of the circle, then you can use fillStyle = “color_name” property with fill() function.
To create a border with a different color, you can use strokeStyle = “color-name”.
And, the last one is stroke() function & this is mandatory to draw the circle.