This page is a self-contained introduction to the HTML5 <canvas> element and its 2D drawing API. You will understand what canvas is, add it to a page, and draw your first shapes with JavaScript.
What canvas adds.
Raster graphics.
Dynamic rendering.
Markup + JS.
Core methods.
requestAnimationFrame.
HTML5 introduced the <canvas> element, which provides a way to dynamically render graphics, charts, animations, and other visualizations directly within a web page.
The Canvas API is powerful and flexible, allowing developers to create interactive and dynamic content in the browser without plugins. Combined with HTML for structure and CSS for layout, canvas opens the door to custom charts, games, and creative coding projects.
Know basic HTML and JavaScript first: variables, functions, and document.getElementById. Then add a canvas tag and one drawing command—you will see pixels appear immediately.
The <canvas> element is an HTML tag that acts as a container for graphics, allowing JavaScript to draw within it dynamically. Unlike SVG, which uses vector graphics stored as DOM nodes, canvas is raster-based—it generates pixel-based bitmaps that you paint programmatically.
Think of canvas as a blank sheet of graph paper: once you draw on it, the image is a grid of colored pixels. To move a shape, you typically clear the canvas and redraw everything in the new position rather than updating a single element.
getImageData for filters and effects.requestAnimationFrame for smooth motion.getContext('webgl') enables hardware-accelerated 3D graphics.Canvas is a powerful tool for creating dynamic and interactive content on the web. Here are common reasons to choose it:
To use the canvas element, add it to your HTML with explicit width and height attributes (the drawing resolution in pixels):
<canvas id="myCanvas" width="400" height="200"></canvas>Then use JavaScript to get the 2D rendering context and draw:
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
// Draw a red rectangle
ctx.fillStyle = 'red';
ctx.fillRect(10, 10, 100, 100);We obtain a reference to the canvas element and its 2D rendering context (getContext('2d')). Then we set fillStyle and draw a filled rectangle with fillRect(x, y, width, height).
Online HTML Editor — paste HTML and script together to preview canvas drawings in the browser.
The Canvas 2D API provides a wide range of methods for drawing shapes, paths, text, images, and more. Some essential methods include:
| Method | What it does |
|---|---|
fillRect(x, y, w, h) | Draws a filled rectangle |
strokeRect(x, y, w, h) | Draws the outline of a rectangle |
clearRect(x, y, w, h) | Clears a rectangular area (transparent) |
beginPath() | Starts a new path or resets the current path |
moveTo(x, y) | Moves the pen to coordinates without drawing |
lineTo(x, y) | Draws a line from the current point to (x, y) |
arc(x, y, r, start, end) | Draws a circular arc |
fillText(text, x, y) | Draws filled text at a position |
As you continue learning canvas, these ideas form the foundation of every drawing program:
| Concept | What it does |
|---|---|
| Rendering context | The CanvasRenderingContext2D object returned by getContext('2d') |
| Coordinate system | Origin (0, 0) is top-left; x increases right, y increases down |
| Fill vs stroke | fillStyle / fillRect paint interiors; strokeStyle / stroke paint outlines |
| Paths | Combine beginPath, moveTo, lineTo, and stroke or fill |
| State stack | save() and restore() preserve styles and transforms |
| Transforms | translate, rotate, and scale move the drawing origin |
| Animation loop | Clear, update positions, redraw each frame with requestAnimationFrame |
| Task | Code snippet |
|---|---|
| Get context | const ctx = canvas.getContext('2d'); |
| Fill color | ctx.fillStyle = '#2563eb'; |
| Draw rectangle | ctx.fillRect(20, 20, 120, 80); |
| Draw line | ctx.moveTo(0,0); ctx.lineTo(100,50); ctx.stroke(); |
| Clear canvas | ctx.clearRect(0, 0, canvas.width, canvas.height); |
| Animation frame | requestAnimationFrame(draw); |
Five starter demos. Use View Output to preview here, or open Try It Yourself to edit and run live in the browser.
The minimum HTML needed before any JavaScript runs.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Canvas</title>
</head>
<body>
<canvas id="myCanvas" width="400" height="200"></canvas>
</body>
</html>Classic first drawing: get the 2D context and call fillRect.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Red Rectangle</title>
</head>
<body>
<canvas id="myCanvas" width="400" height="200"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.fillStyle = 'red';
ctx.fillRect(10, 10, 100, 100);
</script>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Fill and Stroke</title>
</head>
<body>
<canvas id="myCanvas" width="400" height="200"></canvas>
<script>
const ctx = document.getElementById('myCanvas').getContext('2d');
ctx.fillStyle = 'rgba(37, 99, 235, 0.35)';
ctx.fillRect(40, 40, 140, 90);
ctx.strokeStyle = '#0f172a';
ctx.lineWidth = 4;
ctx.strokeRect(30, 30, 160, 110);
ctx.beginPath();
ctx.arc(280, 100, 50, 0, Math.PI * 2);
ctx.fillStyle = '#dc2626';
ctx.fill();
ctx.strokeStyle = '#991b1b';
ctx.lineWidth = 3;
ctx.stroke();
</script>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Canvas Text</title>
</head>
<body>
<canvas id="myCanvas" width="400" height="200"></canvas>
<script>
const ctx = document.getElementById('myCanvas').getContext('2d');
ctx.fillStyle = '#0f172a';
ctx.font = 'bold 28px system-ui, sans-serif';
ctx.fillText('Hello, Canvas!', 40, 80);
ctx.font = '16px Verdana, sans-serif';
ctx.fillStyle = '#64748b';
ctx.fillText('Draw labels, scores, and chart titles.', 40, 120);
</script>
</body>
</html>A red square moves horizontally using requestAnimationFrame.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Canvas Animation</title>
</head>
<body>
<canvas id="myCanvas" width="400" height="200"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
let x = 0;
const dx = 2;
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = 'red';
ctx.fillRect(x, 10, 50, 50);
x += dx;
if (x > canvas.width) {
x = 0;
}
requestAnimationFrame(draw);
}
draw();
</script>
</body>
</html>Canvas graphics are styled through context properties—fillStyle, strokeStyle, lineWidth, globalAlpha, gradients, and patterns—rather than CSS rules on individual shapes. Animations work by clearing the canvas and redrawing objects in new positions each frame.
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = 'red';
ctx.fillRect(x, 10, 50, 50);
x += dx;
if (x > canvas.width) x = 0;
requestAnimationFrame(draw);
}In this pattern, we continuously redraw a red rectangle, moving it horizontally across the canvas. The animation loop is driven by requestAnimationFrame, which syncs with the browser’s refresh rate for smooth motion. Each frame: clear old pixels, update position, draw again.
| Technology | Type | Best for |
|---|---|---|
| Canvas | Raster (pixels) | Games, animations, charts with many data points, image filters |
| SVG | Vector (DOM) | Icons, logos, diagrams, maps that scale to any size |
| CSS | Declarative styles | Page layout, typography, transitions on HTML elements |
HTML provides a bitmap surface with fixed width and height in pixels.
getContext('2d') returns the drawing API object.
Call fillRect, stroke, drawImage, etc.
The canvas bitmap updates on screen; animations repeat each frame.
<canvas> enables dynamic graphics, charts, and animations in the browser.getContext('2d'), then use fillRect, paths, and text methods.requestAnimationFrame.width and height attributes on the canvas elementrequestAnimationFrame for smooth animationsclearRect before redrawing animated scenessave() and restore()devicePixelRatio for sharp retina displaysCanvas can be used with other web technologies such as JavaScript and SVG to create interactive and dynamic web pages. Export a canvas to a PNG with canvas.toDataURL(), or overlay SVG icons on top of a canvas game HUD for crisp UI elements.
Edit any example from this page in the live Try It editor.
12 people found this page helpful