Drawing HTML Canvas in 3 Simple Steps

by Gopi Chand · March 5, 2016

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…

Please follow and like us: