The HTML5 canvas element enables drawing graphics on a webpage using JavaScript. Originally introduced by Apple for Mac OS dashboard widgets and to enhance graphics in the Safari web browser, it was later adopted by Firefox, Google Chrome, and Opera. Now, the canvas is part of the HTML5 specification for next-generation web technologies.
By default, the <canvas> element has a width of 300px and a height of 150px, with no border or content. However, you can customize its width and height using the CSS height and width properties, and apply a border using the CSS border property.
The canvas is a two-dimensional rectangular area. The coordinates of the top-left corner are (0, 0), known as the origin, and the coordinates of the bottom-right corner are (canvas width, canvas height). Here's a simple demonstration of the canvas default coordinate system.
Tip: Place your mouse pointer within the canvas area demonstrated above, and you will see its current coordinates relative to the canvas. The <canvas> element is supported by all major web browsers, including Chrome, Firefox, Safari, Opera, and Internet Explorer 9 and above.
In this section, we'll take a closer look at how to draw basic paths and shapes using the newly introduced HTML5 canvas element and JavaScript.
Here is the base template for drawing paths and shapes on the 2D HTML5 canvas:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Drawing on Canvas</title>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
// draw stuff here
};
</script>
</head>
<body>
<canvas id="myCanvas" width="300" height="200"></canvas>
</body>
</html>All the lines except lines 7 to 11 are pretty straightforward. The anonymous function attached to the window.onload event will execute when the page loads. Once the page is loaded, we can access the canvas element using the document.getElementById() method. Then, we define a 2D canvas context by passing '2d' into the getContext() method of the canvas object.
The most basic path you can draw on a canvas is a straight line. The essential methods used for this purpose are moveTo(), lineTo(), and stroke().
The moveTo() method sets the position of the drawing cursor on the canvas. The lineTo() method defines the coordinates of the line's end point, and finally, the stroke() method is used to make the line visible.
Let's try an example:
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.moveTo(50, 150);
context.lineTo(250, 50);
context.stroke();
};
</script>You can create arcs using the arc() method. The syntax of this method is as follows:
The JavaScript code in the below example will draw an arc on the canvas.
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.arc(150, 150, 80, 1.2 * Math.PI, 1.8 * Math.PI, false);
context.stroke();
};
</script>You can generate rectangle and square shapes using rect() method. This method requires four parameters: the x and y position of the rectangle, as well as its width and height.
The basic syntax of the rect() method is as follows:
The below JavaScript code will draw a rectangle shape centered on the canvas.
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.rect(50, 50, 200, 100);
context.stroke();
};
</script>There isn't a dedicated method for creating a circle like the rect() method for rectangles. Instead, you can form a fully enclosed arc, such as a circle, using the arc() method.
The syntax for drawing a full circle with the arc() method is as below:
The below example will draw a complete circle centered on the canvas.
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.arc(150, 100, 70, 0, 2 * Math.PI, false);
context.stroke();
};
</script>The default color of the stroke is black, with a thickness of one pixel. However, you can customize the color and width of the stroke using the strokeStyle and lineWidth properties, respectively.
The following example will draw an orange line with a width of 5 pixels.
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.lineWidth = 5;
context.strokeStyle = "orange";
context.moveTo(50, 150);
context.lineTo(250, 50);
context.stroke();
};
</script>You can also specify the cap style for the lines using the lineCap property. There are three available styles for the line caps: butt, round, and square. Here's an example:
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.lineWidth = 10;
context.strokeStyle = "orange";
context.lineCap = "round";
context.arc(150, 150, 80, 1.2 * Math.PI, 1.8 * Math.PI, false);
context.stroke();
};
</script>You can fill color inside canvas shapes using the fillStyle() method.
The below example demonstrates how to fill a solid color inside a rectangle shape.
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.rect(50, 50, 200, 100);
context.fillStyle = "#FB8B89";
context.fill();
context.lineWidth = 5;
context.strokeStyle = "black";
context.stroke();
};
</script>Tip: When styling shapes on canvas, it's recommended to use the fill() method before the stroke() method to ensure the stroke is rendered correctly.
Similarly, you can utilize the fillStyle() method to fill a solid color inside a circle as well.
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.arc(150, 100, 70, 0, 2 * Math.PI, false);
context.fillStyle = "#FB8B89";
context.fill();
context.lineWidth = 5;
context.strokeStyle = "black";
context.stroke();
};
</script>You can also fill gradient color inside canvas shapes. A gradient represents a smooth visual transition from one color to another. There are two types of gradients available: linear and radial.
The basic syntax for creating a linear gradient is as follows:
The following example demonstrates the use of the createLinearGradient() method to fill a linear gradient color inside a rectangle. Let's try it out to understand its functionality better:
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.rect(50, 50, 200, 100);
var grd = context.createLinearGradient(0, 0, canvas.width, canvas.height);
grd.addColorStop(0, '#8ED6FF');
grd.addColorStop(1, '#004CB3');
context.fillStyle = grd;
context.fill();
context.stroke();
};
</script>Similarly, you can fill canvas shapes with a radial gradient using the createRadialGradient() method. The basic syntax for creating a radial gradient is as follows:
The following example demonstrates the use of the createRadialGradient() method to fill a radial gradient color inside a circle. Let's try it out to understand how it works in practice:
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.arc(150, 100, 70, 0, 2 * Math.PI, false);
var grd = context.createRadialGradient(150, 100, 10, 160, 110, 100);
grd.addColorStop(0, '#8ED6FF');
grd.addColorStop(1, '#004CB3');
context.fillStyle = grd;
context.fill();
context.stroke();
};
</script>You can also draw text onto a canvas. These texts can contain any Unicode characters.
The below example will draw a simple greeting message "Hello World!" onto a canvas.
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.font = "bold 32px Arial";
context.fillText("Hello World!", 50, 100);
};
</script>Additionally, you can set the color and alignment of the text on the canvas, like this:
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.font = "bold 32px Arial";
context.textAlign = "center";
context.textBaseline = "middle";
context.fillStyle = "orange";
context.fillText("Hello World!", 150, 100);
};
</script>You can also apply a stroke to text using the strokeText() method. This method will color the outline of the text instead of filling it.. However, if you want to set both the fill and stroke on canvas text, you can use both the fillText() and strokeText() methods together.
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.font = "bold 32px Arial";
context.textAlign = "center";
context.textBaseline = "middle";
context.strokeStyle = "orange";
context.strokeText("Hello World!", 150, 100);
};
</script>Tip: While styling text on canvas, it's recommended to use the fillText() method before the strokeText() method to ensure the stroke is rendered correctly.