HTML Canvas: Guide to Creating Dynamic Web Graphics
HTML canvas is the topic we are discussing. On a web page, graphics are drawn using the HTML <canvas> element. <Canvas> was used to create the graphic on the left. The image consists of four elements: a colorful text, a multicolor rectangle, and a gradient rectangle.
HTML Canvas: What is it?
HTML Canvas is a drawing surface in HTML that allows you to create dynamic graphics and animations using JavaScript.
It is an HTML element that creates an area on a web page where you and other developers can draw graphics and animations using a JavaScript.
The Canvas provides a comprehensive set of drawing tools that you can use to create shapes, lines, gradients, patterns, and text on a canvas. It also provides a range of animation tools that allows you to create dynamic and interactive web graphics.
There are numerous ways to draw paths, boxes, circles, text, and insert images to Canvas.
HTML Canvas Advantages
HTML Canvas is a versatile and robust tool that offers several advantages to web developers seeking to create captivating and interactive content. Some of the benefits of HTML Canvas include:
- HTML Canvas empowers developers to design dynamic and responsive graphics without using plugins or additional software. Consequently, it is simple to create interactive charts or animations that respond to user input, which makes it ideal for creating visually appealing content.
- HTML Canvas is optimized for high performance, enabling developers to create high-speed rendering, complex animations, and graphics that run smoothly and without delay. This makes it an excellent choice for developing games, visualizations, and other interactive content.
- HTML Canvas is supported by all major web browsers, including Firefox, Safari, Chrome, and Edge, which makes it easy to create cross-platform content that works seamlessly across different devices and operating systems.
- HTML Canvas content can be made accessible to users with disabilities through the use of accessible design techniques such as providing alternative text descriptions for non-text content. This ensures that all users can access and interact with the content, regardless of their abilities.
- HTML Canvas provides a broad range of tools and features that can be utilized to create a wide range of visual content, from simple drawings to complex animations and visualizations. This versatility enables developers to create unique and engaging content that is tailored to the specific needs of their users.
Browser Compatibility
In HTML canvas, the numbers in the table indicate which browser version fully compatible the <canvas> element.
| Element |  | |  | | |
|---|
| <canvas> | 10.0 | 14.5 | 10.0 | 16.0 | 92.0 |
How Does HTML Canvas Work?
To use HTML Canvas, You first create a canvas element on the web page using HTML.
The canvas element provides a drawing surface that is blank by default. Once the canvas element is created, you can use JavaScript to interact with the canvas and draw shapes, lines, and other graphics on it.
The Canvas provides a set of methods which you can use to draw graphics on the canvas.
For example, the fillRect() method can be used to draw a rectangle on the canvas, while the arc() method can be used to draw a circular shape.
You can also use the API to create animations by updating the canvas at regular intervals using the requestAnimationFrame() method.
The canvas on an HTML page is a rectangular area. There is no border or content on a canvas by itself.
Here are the markups:
<canvas id=”myCanvas” width=”250″ height=”120″></canvas>
Note: Make sure to specify an id variable (to be referred to in scripts) and width and height parameters to define canvas dimensions. You can add a border by using the style attribute.
In this example, we have an empty canvas / HTML canvas:
<!DOCTYPE html>
<html>
<body><canvas id="myCanvas" width="250" height="120" style="border:1px solid
#000000;">
</canvas></body>
</html>
Now Add JavaScript
You must add JavaScript to the rectangular canvas after creating it. Some examples are as follows:
Draw a Line
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="220" height="150" style="border:1px solid black">
Your browser is not compatible with HTML canvas tag.</canvas>
<script>
var a = document.getElementById("myCanvas");
var cmx = a.getContext("2d");
cmx.moveTo(0, 0);
cmx.lineTo(220, 150);
cmx.stroke();
</script>
</body>
</html>
Draw a Triangle
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="130" height="80" style="border:1px solid black;"></canvas>
<script>
window.onload = function() {
const canvas = document.getElementById("myCanvas");
if (canvas.getContext) {
const ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(75, 50);
ctx.lineTo(100, 75);
ctx.lineTo(100, 25);
ctx.fill();
}
};
</script>
</body>
</html>
Draw a Smile
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="330" height="150" style="border:1px solid black;"></canvas>
<script>
window.onload = function() {
const canvas = document.getElementById("myCanvas");
if (canvas.getContext) {
const ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.arc(75, 75, 50, 0, Math.PI * 2, true); // Outer circle
ctx.moveTo(110, 75);
ctx.arc(75, 75, 35, 0, Math.PI, false); // Mouth (clockwise)
ctx.moveTo(65, 65);
ctx.arc(60, 65, 5, 0, Math.PI * 2, true); // Left eye
ctx.moveTo(95, 65);
ctx.arc(90, 65, 5, 0, Math.PI * 2, true); // Right eye
ctx.stroke();
}
};
</script>
</body>
</html>
Draw a Circle
<!DOCTYPE html>
<html>
<body><canvas id="myCanvas" width="220" height="150" style="border:1px solid black;">
Your browser is not compatible with HTML canvas tag.</canvas>
<script>
var a = document.getElementById("myCanvas");
var cmx = a.getContext("2d");
cmx.beginPath();
cmx.arc(100, 70, 40, 0, 2 * Math.PI);
cmx.stroke();
</script></body>
</html>
Stroke Text
<!DOCTYPE html>
<html>
<body><canvas id="mrxcanvas" width="220" height="150" style="border:1px solid black;">
Your browser is not compatible with HTML canvas tag.</canvas>
<script>
var a = document.getElementById("mrxcanvas");
var cmx = a.getContext("2d");
cmx.font = "25px Poppins";
cmx.strokeText("Mr Examples", 40, 80);
</script></body>
</html>
Draw a Text
<!DOCTYPE html>
<html>
<body>
<canvas id="mrxcanvas" width="220" height="150" style="border:1px solid black;">
Your browser is not compatible with HTML canvas tag.</canvas>
<script>
var a = document.getElementById("mrxcanvas");
var cmx = a.getContext("2d");
cmx.font = "25px Poppins";
cmx.fillText("Mr Examples", 40, 80);
</script>
</body>
</html>
Draw Linear Gradient
<!DOCTYPE html>
<html>
<body><canvas id="mrxcanvas" width="220" height="150" style="border:1px solid black;">
Your browser is not compatible with HTML canvas tag.</canvas>
<script>
var a = document.getElementById("mrxcanvas");
var cmx = a.getContext("2d");// Create gradient
var grd = cmx.createLinearGradient(0, 0, 200, 0);
grd.addColorStop(0, "blue");
grd.addColorStop(1, "white");// Fill with gradient
cmx.fillStyle = grd;
cmx.fillRect(10, 10, 150, 80);
</script></body>
</html>
<!DOCTYPE html>
<html>
<body><p>Image to use:</p>
<img id="scream" src="https://mrexamples.com/wp-content/uploads/html_images/img_girl.jpg" alt="Standing Girl" width="300" height="500">
<p>Canvas to fill:</p>
<canvas id="mrxcanvas" width="300" height="500" style="border:1px solid black;">
Your browser not compatible with HTML canvas tag.</canvas>
<p><button onclick="mrxcanvas()">Try it</button></p>
<script>
var a = document.getElementById("mrxcanvas");
var cmx = a.getContext("2d");
var img = document.getElementById("scream");
cmx.drawImage(img, 10, 10);
</script></body>
</html>
Draw Circular Gradient
<!DOCTYPE html>
<html>
<body><canvas id="mrxcanvas" width="220" height="150" style="border:1px solid black;">
Your browser is not compatible with HTML canvas tag.</canvas>
<script>
var a= document.getElementById("mrxcanvas");
var cmx = a.getContext("2d");// Create gradient
var grd = cmx.createRadialGradient(75, 50, 5, 90, 60, 100);
grd.addColorStop(0, "blue");
grd.addColorStop(1, "white");// Fill with gradient
cmx.fillStyle = grd;
cmx.fillRect(10, 10, 150, 80);
</script></body>
</html>
Draw a heart
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="330" height="150" style="border:1px solid black;"></canvas>
<script>
window.onload = function() {
const canvas = document.getElementById("myCanvas");
if (canvas.getContext) {
const ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(75, 40);
ctx.bezierCurveTo(75, 37, 70, 25, 50, 25);
ctx.bezierCurveTo(20, 25, 20, 62.5, 20, 62.5);
ctx.bezierCurveTo(20, 80, 40, 102, 75, 120);
ctx.bezierCurveTo(110, 102, 130, 80, 130, 62.5);
ctx.bezierCurveTo(130, 62.5, 130, 25, 100, 25);
ctx.bezierCurveTo(85, 25, 75, 37, 75, 40);
ctx.fill();
}
};
</script>
</body>
</html>
Path2D Example
Creating a rectangle and a circle is our goal. Objects of this type are stored as Path2D objects.
By using the updated Path2D API, the new stroke and fill functions can be used to draw both objects on the canvas instead of the current path.
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="330" height="150" style="border:1px solid black;"></canvas>
<script>
window.onload = function() {
const canvas = document.getElementById("myCanvas");
if (canvas.getContext) {
const ctx = canvas.getContext("2d");
const rectangle = new Path2D();
rectangle.rect(10, 10, 50, 50);
const circle = new Path2D();
circle.arc(100, 35, 25, 0, 2 * Math.PI);
ctx.stroke(rectangle);
ctx.fill(circle);
}
};
</script>
</body>
</html>
HTML Canvas Best Practices
Here are some best practices to keep in mind when using HTML Canvas:
- To create smooth and efficient animations, it’s best to use the requestAnimationFrame() method to update the canvas at regular intervals.
- HTML Canvas can be used to create complex graphics and animations, but it’s essential to keep things simple. Too many graphics or animations can slow down the web page and lead to a poor user experience.
- HTML Canvas elements should be designed to be responsive to the screen size and device type. This ensures that the canvas graphics look great on all devices, including desktops, tablets, and mobile phones.
- HTML Canvas graphics can be resource-intensive, so it’s important to optimize them for performance. This can be done by using lightweight graphics and animations, reducing the number of graphics and animations on the page, and optimizing the code for fast execution.
Do subscribe to our Newsletter below, if you want to be connected to the technical information on this site.
