HTML Canvas Graphics
The <canvas> element is used to draw graphics on a web page, such as rectangles, gradients, and text.
What is HTML Canvas?
The <canvas> element is used to draw graphics on the fly with JavaScript. The element itself is only a container; you must use JavaScript to do the actual drawing. Canvas has methods for drawing paths, boxes, circles, text, and images, and it is supported by all major browsers.
Canvas Examples
A canvas is a rectangular area on the page. By default it has no border and no content.
Note: Always give it an id (to refer to it in a script) and width and height attributes to set its size. To add a border, use the style attribute.
Example
A basic, empty canvas with a border.
Prompt
A page with a basic, empty 200x100 canvas (id myCanvas) given a 1px solid black border via the style attribute.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Empty Canvas</title>
</head>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
</canvas>
</body>
</html>
Canvas markup
The basic markup for a canvas element.
index.html
<canvas id="myCanvas" width="200" height="100"></canvas>
Add a JavaScript
After making the canvas area, you add JavaScript to do the drawing. You get the canvas with getElementById, then call getContext("2d") to get the drawing context, and use its methods. Here are several examples.
Draw a Line
Drawing a line with moveTo, lineTo, and stroke.
Prompt
A page with a 200x100 canvas and a script that draws a line from (0,0) to (200,100) using getContext('2d'), moveTo, lineTo and stroke.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Draw Line</title>
</head>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML canvas tag.</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(0, 0);
ctx.lineTo(200, 100);
ctx.stroke();
</script>
</body>
</html>
Draw a Circle
Drawing a circle with arc and stroke.
Prompt
A page with a 200x100 canvas and a script that draws a circle centered at (95,50) with radius 40 using arc and stroke.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Draw Circle</title>
</head>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
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(95, 50, 40, 0, 2 * Math.PI);
ctx.stroke();
</script>
</body>
</html>
Draw a Text
Drawing filled text with fillText.
Prompt
A page with a 200x100 canvas and a script that draws filled text "Hello World" in 30px Arial at (10,50) using fillText.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Draw Text</title>
</head>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML canvas tag.</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Hello World", 10, 50);
</script>
</body>
</html>
Stroke Text
Drawing outlined text with strokeText.
Prompt
A page with a 200x100 canvas and a script that draws outlined text "Hello World" in 30px Arial at (10,50) using strokeText.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Stroke Text</title>
</head>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML canvas tag.</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.strokeText("Hello World", 10, 50);
</script>
</body>
</html>
Draw Linear Gradient
Filling a rectangle with a linear gradient.
Prompt
A page with a 200x100 canvas and a script that fills a rectangle with a horizontal linear gradient from red to white.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Linear Gradient</title>
</head>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML canvas tag.</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
// Create gradient
var grd = ctx.createLinearGradient(0, 0, 200, 0);
grd.addColorStop(0, "red");
grd.addColorStop(1, "white");
// Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(10, 10, 150, 80);
</script>
</body>
</html>
Draw Circular Gradient
Filling a rectangle with a radial gradient.
Prompt
A page with a 200x100 canvas and a script that fills a rectangle with a radial (circular) gradient from red to white.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Circular Gradient</title>
</head>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML canvas tag.</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
// Create gradient
var grd = ctx.createRadialGradient(75, 50, 5, 90, 60, 100);
grd.addColorStop(0, "red");
grd.addColorStop(1, "white");
// Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(10, 10, 150, 80);
</script>
</body>
</html>
Draw Image
Drawing an existing image onto the canvas with drawImage.
Prompt
A page with a hidden image (id scream) and a 200x100 canvas, plus a script that draws the image onto the canvas at (10,10) using drawImage.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Draw Image</title>
</head>
<body>
<p>Image to use:</p>
<img id="scream" src="img_the_scream.jpg" alt="The Scream" style="display:none;">
<p>Canvas:</p>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML canvas tag.</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("scream");
ctx.drawImage(img, 10, 10);
</script>
</body>
</html>