Tag canvas creates an area on HTML page, inside which you can draw different shapes and animate them using JavaScript.

Create a drawing area

We register a paired tag canvas with an identifier and specify the arbitrary sizes of our area in HTML и CSS… For further work with JavaScript code, that’s enough.


// HTML код


The default tag is canvas does not appear on HTML page. For clarity, for educational purposes, I will add a background with a marked grid to the area. X и Y axes.

JavaScript code

В JavaScript there are several commands to work with canvas, but first we need to get the element itself by its ID.


let canvas = document.getElementById('draw');


Then we get its context. To do this, call the method getContext () and indicate that we will draw in the context 2d.


let ctx = canvas.getContext('2d');


Draw a filled rectangle

To draw a rectangle, call the variable ctx method fillRect () and give it the initial coordinates X,Y (top left point), width and height.


ctx.fillRect(150, 75, 150, 150); // x, y, width, height


By default, the shape is drawn with a black fill. To change the fill color, use the command fillStyle ().


ctx.fillStyle = 'pink';


Erase a rectangle

Method clearRect () clears the canvas from the shape. To erase the current rectangle, another rectangle with the same dimensions is used.


ctx.clearRect(0, 0, 600, 300); //стирает canvas


Draw a rectangle with no fill

commands rest (), stroke (), fill () control the fill and stroke of a shape.


ctx.strokeStyle = "gray"; //цвет обводки
ctx.lineWidth = "10"; //толщина обводки
ctx.rect(150, 75, 225, 150);
ctx.stroke();
ctx.fillStyle = "pink"; //цвет заливки
ctx.fill();


Drawing a triangle

Method beginPath () begins a new path. Using the method moveTo () fix the starting point with coordinates X и Yand the method lineTo () draws lines.


ctx.beginPath();
ctx.moveTo(225,150);
ctx.lineTo(75,100);
ctx.lineTo(200,50);
ctx.fill();


Drawing a circle

The circle is drawn using the method arc ()to which the arguments are passed.


ctx.lineWidth = 5; // толщина линии
// x,y,radius,startAngle,endAngle,anticlockwise
ctx.arc(200,200,75,0, 2*Math.PI,true);
ctx.stroke();


• x, y – coordinates of the center of the circle
• radius – radius of the circle
• starting angle – starting angle of the circle
• endAngle – the end angle of a full circle corresponds to the angle 2PI.
• anticlockwise – drawing direction, true(counterclock-wise), false(clockwise)

In this tutorial, we learned how to draw a filled rectangle, an erase rectangle, and an unfilled rectangle with custom fill and stroke controls. In addition, you now have an idea of ​​how to draw a triangle and a circle.