HTML Canvas

Introduction

The HTML <canvas> element is a powerful tool for drawing graphics with JavaScript. It provides a drawable region on your page where you can create 2D shapes, render text, draw images, and build animations.

Canvas is widely used for games, data visualizations, photo editors, and interactive web applications. This tutorial walks through setup, drawing basics, styling, transformations, and a complete working example.

What You’ll Learn

What Is HTML Canvas?

The <canvas> element is part of HTML5. It renders a bitmap (grid of pixels) that you paint with JavaScript. Unlike static images, you can redraw the canvas every frame for animation or update charts when data changes.

Canvas is ideal when you need pixel-level control or thousands of moving objects. For logos and icons that scale cleanly, consider HTML SVG instead.

Setting Up the Canvas

Define the canvas in HTML with width and height attributes (the internal pixel size):

<canvas id="myCanvas" width="400" height="300">
  Your browser does not support canvas.
</canvas>

Get the 2D rendering context in JavaScript:

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

Text between <canvas> tags is fallback content for very old browsers. See also the HTML canvas tag reference for all attributes.

Canvas Coordinates

The canvas uses a coordinate system where the top-left corner is (0, 0). X increases to the right; Y increases downward. When you draw at (50, 50), you place content 50 pixels from the left and 50 pixels from the top.

All drawing methods use these pixel coordinates unless you apply transformations (translate, scale, rotate) to the context.

Drawing Shapes

Canvas provides built-in methods for common shapes. Here are the two you will use most often:

Rectangles

fillRect(x, y, width, height) draws a filled rectangle. strokeRect draws only the outline.

ctx.fillStyle = '#FF0000';
ctx.fillRect(50, 50, 150, 100);

Circles

Use arc(x, y, radius, startAngle, endAngle) inside a path. Angles are in radians; a full circle runs from 0 to Math.PI * 2.

ctx.beginPath();
ctx.arc(150, 150, 50, 0, Math.PI * 2);
ctx.fillStyle = 'blue';
ctx.fill();

beginPath() starts a fresh path so previous shapes do not connect accidentally.

Working with Colors and Styles

Style drawings with context properties before calling draw methods:

• fillStyle — interior color (names, hex, rgb).
• strokeStyle — outline color.
• lineWidth — stroke thickness in pixels.

ctx.fillStyle = 'green';
ctx.fillRect(100, 100, 200, 100);

ctx.strokeStyle = 'black';
ctx.lineWidth = 5;
ctx.strokeRect(100, 100, 200, 100);

Drawing Images

Load an image, then paint it onto the canvas with drawImage:

const img = new Image();
img.src = 'photo.jpg';
img.onload = function () {
  ctx.drawImage(img, 50, 50, 200, 150);
};

Drawing happens inside onload because the browser needs time to fetch the file. The last two numbers set width and height on the canvas.

Text on Canvas

Draw text with fillText (filled) or strokeText (outline). Set the font first, similar to CSS:

ctx.font = '30px Arial';
ctx.fillStyle = '#1e293b';
ctx.fillText('Hello, Canvas!', 50, 50);

The Y coordinate in fillText is the text baseline, not the top of the letters.

Canvas Transformations

Transform the coordinate system before drawing. Common methods:

Scaling

Change the size of subsequent drawings:

ctx.scale(2, 2);
ctx.fillRect(50, 50, 100, 50); /* draws 200×100 px */

Rotating

Rotate around the current origin (0, 0 by default):

ctx.rotate((Math.PI / 180) * 45); /* 45 degrees */
ctx.fillRect(100, 100, 100, 50);

Translating

Move the origin to a new point:

ctx.translate(100, 100);
ctx.fillRect(0, 0, 100, 50); /* appears at (100, 100) */

Wrap transforms in ctx.save() and ctx.restore() so later shapes use the default coordinate system.

Animation Basics

To animate, clear the canvas each frame and redraw at new positions. Use requestAnimationFrame for smooth, browser-optimized loops:

let x = 0;
function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.fillRect(x, 40, 40, 40);
  x += 2;
  requestAnimationFrame(draw);
}
draw();

Examples Gallery

Six examples from setup to animation. Each includes View Output and Try It Yourself.

<canvas id="myCanvas" width="400" height="200"></canvas>
<script>
  var ctx = document.getElementById('myCanvas').getContext('2d');
  ctx.fillStyle = '#ef4444';
  ctx.fillRect(50, 50, 150, 100);
</script>

ctx.beginPath();
ctx.arc(150, 150, 60, 0, Math.PI * 2);
ctx.fillStyle = '#3b82f6';
ctx.fill();

ctx.fillStyle = '#22c55e';
ctx.fillRect(100, 100, 200, 100);
ctx.strokeStyle = '#000';
ctx.lineWidth = 5;
ctx.strokeRect(100, 100, 200, 100);

ctx.font = '30px Arial';
ctx.fillStyle = '#1e293b';
ctx.fillText('Hello, Canvas!', 50, 50);

function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.fillStyle = '#f97316';
  ctx.fillRect(x, 40, 40, 40);
  x += 2;
  if (x > canvas.width) x = 0;
  requestAnimationFrame(draw);
}
draw();

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Canvas Example</title>
</head>
<body>
  <canvas id="myCanvas" width="500" height="300"></canvas>
  <script>
    var ctx = document.getElementById('myCanvas').getContext('2d');
    ctx.fillStyle = 'lightblue';
    ctx.fillRect(50, 50, 200, 100);
    ctx.font = '20px Arial';
    ctx.fillStyle = 'black';
    ctx.fillText('Hello Canvas', 80, 110);
    ctx.beginPath();
    ctx.arc(380, 100, 50, 0, Math.PI * 2);
    ctx.fillStyle = 'tomato';
    ctx.fill();
  </script>
</body>
</html>

lightblue rectangle
"Hello Canvas" text
tomato circle

Best Practices

🚀 Common Use Cases

• Games — sprites, collision, and frame loops.
• Charts — bar, line, and pie visualizations (Chart.js uses canvas).
• Image editing — filters and pixel manipulation.
• Signatures — capture mouse/touch strokes.
• Particle effects — fireworks, snow, confetti.
• Video processing — draw video frames to canvas.