JavaScript Canvas

Have you ever used a windows paint application? Let’s just say you did but what if you want to draw shapes, lines, texts, and 2D or 3D graphics online on a web browser then what do you do? Here HTML 5 canvas comes in which allows us to draw 2D or 3D graphics in a browser.

This write-up will acknowledge you about

• What is a canvas
• How to activate a canvas using JavaScript
• How to resize a canvas using JavaScript
• How to create shapes on a canvas using JavaScript

What is a canvas

Canvas is a container, that allows us to draw different shapes, lines, and texts in a browser. By default, the canvas container is invisible and has no border. So to make it visible we use HTML 5 canvas tag and the CSS border property.

Syntax:

The above syntax only displays a simple container with a border.

How to activate a canvas using JavaScript

Basically canvas is an HTML 5 tag but it is only operational with the help of a JavaScript. The following code is compulsory to access and activate a canvas.

Code:

In this code, we use the querySelector() method to get the canvas id which will connect our JavaScript code with the canvas tag. Then we use the getContext() method to specify the environment of a canvas(2D or 3D).

How to resize a canvas using JavaScript

We use JavaScript code to give height and width properties of canvas objects. If we use CSS to give height and width to the canvas container it will pixelate the container rather than resizing it. So use the following JavaScript code to resize the canvas container.

Syntax:

How to create shapes on canvas using javascript

Now we are going to see how we can create different shapes on canvas using javascript.

Rectangle

The following javascript code is used to create a rectangle on the canvas.

Syntax:

Here variable name represents the variable we have created for the getContext() method. While the strockRect() method takes four parameters where the value x and the value y represent the position on the canvas where you want to draw the shape(rectangle). Whereas, width and height are used to mention the size of the rectangle.

Code:

In this code, a rectangle is created with 250px width and 100px height.

Output:

In case, you want to change the color of the rectangle just add the following code before your rectangle creation code:

Code:

Output:

Filled Rectangle

The following javascript code is used to create a filled rectangle on the canvas.

Syntax:

The fillRect() method also takes the four parameters and is used to create a filled rectangle.

Code:

Output:

To change the color of the rectangle just use the fillStyle property before your rectangle creation code:

Code:

Output:

Circle

The following javascript code is used to create a circle on the canvas.

Syntax:

Here arc() method takes five parameters including the value x and value y representing the position of the circle, circle radius, starting angle, and ending angle value. stroke() method is used draw a path of the circle which will eventually displays a circle.

Code:

Output:

Line

The following javascript code is used to create a line on the canvas.

Syntax:

In this syntax,

beginPath() method starts a path,

moveTo() method takes two values x and y which moves the cursor to the specific point.

lineTo() method also takes two values, the starting point from where the line starts and ending point where the line ends.

stroke() method is used to draw a path of the line which will eventually display a line.

Code:

Output:

Text

The following javascript code is used to write a text on the canvas.

Syntax:

First, you need to mention the font size and font family using the font property. Secondly, provide the color if you want using the fillStyle property. Lastly, fillText() method takes three values, text, value x and value y.

Code:

Output:

Hollow Text

The following javascript code is used to write a hollow text on the canvas.

Syntax:

Here strokeText() method is used to writethe text in hollow style..

Code:

Output:

Conclusion

Canvas is an artboard to draw 2D or 3D graphics on a browser. In this article we have learned how we can draw a circle, rectangle, line and text on a canvas through JavaScript. Although canvas is an HTML5 tag but the operations on canvas can only be performed with the help of a JavaScript code.