Canvas Intro
On this page, you can find information about the HTML <canvas> element, see different examples, and try to draw lines, circles, gradients, and images with it.
The HTML <canvas> element is used for drawing graphics via scripting. It is only a container for graphics. You need JavaScript to draw the graphics.
Canvas has multiple methods for drawing paths, circles, boxes, text, as well as for adding images.
Canvas can be used to draw colorful text, with or without animation. Canvas objects can also be animated, meaning they can move.
More than one <canvas> elements can be on one HTML page.
Canvas is a rectangular area, and by default, it has no border or content.
Canvas Intro
<canvas id="canvas" width="250" height="150"></canvas>Always use an id attribute, and a width and height attribute to define the size of the canvas. Use the style attribute to add a border.
To draw on the canvas, you must first get a 2D drawing context using canvas.getContext('2d').
Example of the HTML <canvas> tag:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<canvas id="canvas" width="250" height="150" style="border:1px solid #1c87c9;">
The HTML5 canvas tag is not supported by your browser.
</canvas>
</body>
</html>Example of the HTML <canvas> tag to draw a circle:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<canvas id="exampleCanvas" width="200" height="200" style="border:1px solid #dddddd;">
HTML5 canvas tag is not supported by your browser.
</canvas>
<script>
var c = document.getElementById("exampleCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(100, 100, 60, 0, 2 * Math.PI);
ctx.strokeStyle = '#009299';
ctx.stroke();
</script>
</body>
</html>Example of the HTML <canvas> tag to draw a text:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<canvas id="exampleCanvas" width="350" height="110" style="border:1px solid #dddddd;">
HTML5 canvas tag is not supported by your browser.
</canvas>
<script>
var c = document.getElementById("exampleCanvas");
var ctx = c.getContext("2d");
ctx.font = "40px Arial";
ctx.fillStyle = '#262ac7';
ctx.fillText("Canvas Text", 55, 65);
</script>
</body>
</html>Example of the HTML <canvas> tag to draw a linear gradient:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<canvas id="exampleCanvas" width="300" height="140" style="border:1px solid #dddddd;">
The HTML5 canvas tag is not supported by your browser.
</canvas>
<script>
var c = document.getElementById("exampleCanvas");
var ctx = c.getContext("2d");
var grd = ctx.createLinearGradient(0, 0, 300, 0);
grd.addColorStop(0, "#359900");
grd.addColorStop(1, "#ffffff");
ctx.fillStyle = grd;
ctx.fillRect(20, 20, 250, 100);
</script>
</body>
</html>Example of the HTML <canvas> tag to draw a line:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<canvas id="exampleCanvas" width="150" height="150" style="border:1px solid #cccccc;">
The HTML5 canvas tag is not supported by your browser.
</canvas>
<script>
var c = document.getElementById("exampleCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(0, 0);
ctx.lineTo(150, 150);
ctx.strokeStyle = '#86417d';
ctx.stroke();
</script>
</body>
</html>Example of the HTML <canvas> tag to draw an image:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<div>
<h2>Original image</h2>
<img id="flower" src="https://images.unsplash.com/photo-1485431142439-206ba3a9383e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" width="500" height="379" />
</div>
<h2>Draw an image with canvas</h2>
<canvas id="exampleCanvas"></canvas>
<script>
const canvas = document.getElementById('exampleCanvas');
const ctx = canvas.getContext('2d');
const image = document.getElementById('flower');
image.addEventListener('load', e => {
ctx.drawImage(image, 80, 80, 350, 200, 10, 10, 150, 100);
});
</script>
</body>
</html>Example of the HTML <canvas> tag to draw a circular gradient:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<canvas id="exampleCanvas" width="260" height="160" style="border:1px solid #cdcdcd;">
The HTML5 canvas tag is not supported by your browser.
</canvas>
<script>
var c = document.getElementById("exampleCanvas");
var ctx = c.getContext("2d");
var grd = ctx.createRadialGradient(150, 75, 10, 115, 90, 150);
grd.addColorStop(0, "purple");
grd.addColorStop(1, "white");
ctx.fillStyle = grd;
ctx.fillRect(20, 20, 220, 120);
</script>
</body>
</html>Practice
What are the characteristics and usage of the HTML Canvas?