One of the innovations of HTML5 was the Canvas element and advanced features for working and manipulating graphics. With canvas, you can draw both the simplest graphic primitives – lines, shapes, text, as well as create complex graphic games. In addition, canvas allows you to manipulate images and even videos.
Let’s define a canvas element on the web page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Canvas in HTML5</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="200">
Your browser does not support Canvas
</canvas>
</body>
</html>
In the past, when HTML5 standards were just beginning to be implemented, it was common to detect inside the canvas element that the browser does not support this element. And if the web browser does not support canvas, then this inscription was displayed to the user. However, at the present time, when HTML5 standards, especially canvas, are widely implemented, such inscriptions are already used rather by inertia.
Also, as a rule, the width and height are set for the canvas element using the widthand attributes height. If you do not specify these attributes, the default width will be 300 pixels and the height will be 150 pixels.
Getting the drawing context
All drawing on canvas is done with JavaScript code. To start drawing on the canvas, we need to get its context:
var canvas = document.getElementById("myCanvas"),
context = canvas.getContext("2d");
The function is used to get the context getContext(“2d”). In this case, we get a 2D context for creating 2D graphics. Also, the context of the canvas element allows you to create three-dimensional graphics. You can read more about this in the WebGL guide . In this case, we will only touch on two-dimensional graphics.
Drawing rectangles
And finally, it remains for us to actually draw the first figure. To draw the simplest shapes – rectangles, we may need three methods:
- clearRect(x, y, w, h): clears a specific rectangular area whose top left corner has x and y coordinates, width is w, and height is h
- fillRect(x, y, w, h): fills with color a rectangle whose top left corner has x and y coordinates, width is w, and height is h
- strokeRect(x, y, w, h): draws the outline of a rectangle without filling it with any particular color
Now we use these methods:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Canvas in HTML5</title>
</head>
<body>
<canvas id="myCanvas" width="350" height="200" style="background-color:#eee; border: 1px solid #ccc;">
Your browser does not support Canvas
</canvas>
</body>
</html>
When drawing, the x and y coordinates of the top left corner of the rectangle relative to the canvas element are passed to the strokeRectand functions, as well as the width and height of the rectangle. fillRectIn this case, the origin is considered to be the upper left corner of the canvas element, the x-axis is directed to the right, and the y-axis is directed down:
Unlike strokeRectand , fillRectthe method clearRectclears a certain area. In fact, this area will acquire the color that it would have if the and functions were not applied to strokeRectit fillRect. For example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Canvas in HTML5</title>
</head>
<body>
<canvas id="myCanvas" width="350" height="200" style="background-color:#eee; border: 1px solid #ccc;">
Your browser does not support Canvas
</canvas> </body>
</html>
In this case, a small part of the rectangle in the upper left corner is cleared:
