Learn how to use the HTML <canvas> tag, a powerful tool for creating graphics with JavaScript. Using this tag in your web browser, you can create animations, games, and image compositions. In this tutorial, we will study HTML canvas along with its implementation.
What is the Canvas Tag?
The <canvas> tag in HTML is a rectangular space with specific height and width attributes dedicated to graphical content that allows you to create graphics in a web browser. It provides multiple ways to draw shapes, text, lines, circles, and images. Canvas is widely used for game development, photo editing, graphic designing, animation, data visualization, and video processing. However, the canvas initially has no border or content, and you need to use JavaScript to create them.
Displaying an Empty HTML Canvas Element
Below is an example of a simple use of the <canvas> tag with only two distinct attributes: width and height. It also includes all the essential HTML5 attributes, such as id, class, and name.
Example:
<canvas id="canvasExample" class="canvasClass" name="myCanvas" width="500" height="500" style="border:1px solid #000000;">
Your browser does not support the HTML canvas tag.
</canvas>Canvas Tag Attributes
| Attribute | Function |
|---|---|
height
| Determines the canvas's height, with a default value set to 150. |
width
| Defines the canvas's width, with a default value set to 300. |
id
| Provides a unique identifier for the canvas, enabling targeted scripting. |
Basic Usage of the Canvas Tag
Drawing Rectangle
Here's a basic example of using the canvas tag. First, we create a canvas and then use JavaScript to draw a straight rectangle on it.
Example:
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="500" height="200" style="border:1px solid #000000;">
Your browser does not support the HTML canvas tag.
</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(20, 20, 150, 100);
</script>
</body>
</html>In the example mentioned above, the method getContext('2d') returns a drawing context of the canvas. This context enables drawing on the canvas. Using the fill style, the fillRect(x, y, width, height) method has been used to create a filled rectangle on the canvas.
Drawing Paths
We can create more intricate drawings using the HTML <canvas> element. As an illustration, we can draw a triangle as shown below:
Example:
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="500" height="200" style="border:1px solid #000000;">
Your browser does not support the HTML canvas tag.
</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.moveTo(75, 50);
ctx.lineTo(100, 75);
ctx.lineTo(100, 25);
ctx.fill();
</script>
</body>
</html>In the example mentioned above, the function beginPath() initiates a new path, moveTo(x, y) moves the path to a specific point on the canvas without creating a line. The function lineTo(x, y) adds a new point and creates a line from that point to the new one. Lastly, the fill() function fills the path.
Drawing Circle
Here is another example of how to draw a circle on the canvas by using the arc method:
Example:
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="500" height="200" style="border:1px solid #000000;">
Your browser does not support the HTML canvas tag.
</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(100, 75, 50, 0, 2 * Math.PI); // Parameters: x, y, radius, startAngle, endAngle
ctx.stroke(); // Draws the circle
ctx.fillStyle = "#FF0000"; // Red color
ctx.fill(); // Fills the circle with red color
</script>
</body>
</html>In the above example, we begin by obtaining a reference to our canvas and its 2D context. Next, we initiate a new drawing path using the beginPath() function. We use the arc() method to create a circle to form an arc/curve. We then stroke the path to draw the circle on the canvas. Finally, we set a fill style (red in this case) and use the fill() method to fill the circle with that color. The arc method requires the x and y coordinates of the circle's center, the circle's radius, the start angle, and the end angle (where 2 * PI represents a full circle).
Key Properties of the HTML Canvas
HTML Canvas's JavaScript API provides developers with various properties, giving them significant control over their graphic design. Here is an overview of these important properties:
| Property | Description |
|---|---|
fillStyle
| Sets or retrieves the color, gradient, or pattern used to fill the drawing. |
font
| Defines the font properties for text content within the canvas. |
globalAlpha
| Sets or gets the alpha or transparency value of the drawing. |
lineWidth
| Controls the width of lines drawn on the canvas. |
strokeStyle
| Establishes the color, gradient, or pattern used for strokes. |
shadowColor
| Sets the color to use for shadows. |
shadowBlur
| Determines the level of blur applied to shadows. |
Essential Methods in the HTML Canvas API
The HTML Canvas API provides a variety of methods that are useful for manipulating and creating graphics on the canvas. Together with the properties discussed earlier, these methods provide a complete set of tools for creating interactive web graphics. Below are some of the key methods:
| Method | Description |
|---|---|
fillRect(x, y, width, height)
| Draws a filled rectangle. |
strokeRect(x, y, width, height)
| Outlines a rectangle. |
clearRect(x, y, width, height)
| Clears a rectangular area, making it transparent. |
fillText(text, x, y [, maxWidth])
| Fills a given text at a specific (x, y) position. Optionally with a maximum width to draw. |
strokeText(text, x, y [, maxWidth])
| Strokes a given text at an exact (x, y) position. Optionally with a maximum width to draw. |
beginPath()
| Starts a new path or resets the current path. |
moveTo(x, y)
| Moves the path to a specified point on the canvas without creating a line. |
lineTo(x, y)
| Adds a new point and creates a line from the previous point to the new one. |
closePath()
| Creates a path from the current point back to the starting point. |
fill()
| Fills the current drawing (path). |
stroke()
| Actually draws the path defined with all the moveTo() and lineTo() methods. |
These methods allow you to draw and animate various shapes and text on the canvas. You can create anything from basic lines and rectangles to complex paths and designs.
