Drawing HTML Canvas in 3 Simple Steps

HTML canvas
HTML canvas has various methods for drawing paths, circles, boxes, shapes, texts, adding images. The HTML <canvas> has only a container of graphics that can be used to draw the graphics that can be done by scripting (JavaScript).
The following are the three simple steps you need to draw the HTML canvas.
Step I. Finding the canvas element
The first thing you have to do is that, find the canvas element using the HTML DOM (Document Object Model: root node of HTML document) method getElementById().
The getElementById() method returns the element that has ID attribute with the specified value.
Syntax:
var canvas=document.getElementById(“newCanvas”) ;
Here ID is “newCanvas” and canvas is variable name.
Step II: Creating a drawing object
Now, you need a drawing object for the canvas. The getContext() method used to returns an object that provides methods and properties for drawing on the canvas.
Syntax:
var context=canvas.getContext(“2d”);
Step III: Drawing on the canvas
Now, in final step you can draw what you want on the canvas by setting fill style of the drawing object to the various colors. The fillStyle is a property that can be a CSS color, a gradient, or a pattern and the default color for fillStyle is black. The fillRect(x, y, width, height) is a method used to draw a rectangle filled with fillStyle on the canvas.
Syntax:
Context.fillStyle=”green”; Context.fillRect(0,0,150,20);
Sample of canvas drawing with JavaScript:
You can draw paths, circles, boxes, shapes, texts, adding images, etc. on the canvas.
<html> <body> <canvas id="newCanvas" width="300" height="150" style="border:2px solid blue;"> </canvas> <script> var canvas = document.getElementById("newCanvas"); var context = canvas.getContext("2d"); context.fillStyle = "skyblue"; context.fillRect(50,0,250,120); </script> </body> </html>
Output:
Similarly you can draw these also.
Keep visiting here for more stuffs like this 🙂
Thank you for your patience 🙂
Canvas Images
Before move to draw the images directly, it will good to have some knowledge about the canvas images by knowing its function used to draw the images. To draw a canvas image, drawImage() method is used which requires an images object and a destination more…
Looking forward to read more. Awesome.