HTML Canvas

Introduction

In the previous lesson, you learned about SVG and how vector graphics can be created using shapes, coordinates, and markup.

SVG is excellent for logos, icons, diagrams, charts, and graphics that must remain sharp at different sizes.

However, some applications need to redraw large amounts of visual content continuously.

Browser games, particle effects, drawing applications, real-time visualizations, image editors, and complex animations often require graphics to change many times every second.

For these situations, HTML provides the <canvas> element.

Canvas creates a blank pixel-based drawing surface. JavaScript then controls what is drawn, where it appears, how it looks, and when it changes.

What is Canvas?

HTML Canvas is a rectangular drawing area created using the <canvas> element.

It provides a pixel-based surface where JavaScript can draw graphics dynamically.

Canvas can be used to draw rectangles, lines, circles, paths, text, images, charts, animations, game scenes, and many other visual elements.

Unlike normal HTML elements, the objects drawn on a canvas do not automatically become separate DOM elements.

<canvas
    id="myCanvas"
    width="400"
    height="300"
>
</canvas>

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

ctx.fillStyle = "blue";
ctx.fillRect(50, 50, 150, 100);

Why Do We Need Canvas?

Modern web applications often need graphics that change continuously in response to time, data, physics, animation, or user interaction.

Creating thousands of separate HTML or SVG elements can become inefficient for certain highly dynamic scenes.

Canvas provides a drawing surface that can be updated directly through JavaScript.

Real-World Analogy

Imagine a physical painting canvas.

The canvas begins as an empty surface. A painter uses brushes, colors, and drawing techniques to create the final artwork.

HTML Canvas works in a similar way.

The <canvas> element provides the blank surface, the drawing context provides the tools, and JavaScript acts like the artist controlling those tools.

Physical Canvas          HTML Canvas
───────────────          ───────────

Blank Board              <canvas> Element

Artist                    JavaScript

Paintbrush                Drawing Context

Brush Position            X-Y Coordinates

Paint                     Colors & Styles

Artwork                   Rendered Graphics

HTML Canvas Element

The <canvas> element creates the drawing surface.

By itself, the element does not draw anything.

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

The width and height attributes define the internal pixel dimensions of the drawing surface.

<canvas
    id="myCanvas"
    width="400"
    height="300"
    style="border: 1px solid black;"
>
</canvas>

Canvas Coordinate System

Canvas uses a two-dimensional X-Y coordinate system.

The coordinate origin begins at the top-left corner of the drawing surface.

The top-left corner is represented by the coordinate (0,0).

Positive X values move toward the right, while positive Y values move downward.

(0,0) ───────────────────────→ X
  │
  │
  │          ● (100,100)
  │
  │
  │
  ▼
  Y

ctx.fillRect(
    50,   // X position
    40,   // Y position
    150,  // Width
    100   // Height
);

Accessing the Canvas

JavaScript must access the canvas before drawing can begin.

The process normally requires two steps: selecting the <canvas> element and requesting a drawing context.

<canvas
    id="myCanvas"
    width="400"
    height="300"
>
</canvas>

const canvas = document.getElementById("myCanvas");

const ctx = canvas.getContext("2d");

Example 1: Drawing a Rectangle

The fillRect() method draws a filled rectangle.

ctx.fillStyle = "blue";

ctx.fillRect(
    50,
    40,
    150,
    100
);

// Filled rectangle
ctx.fillRect(x, y, width, height);

// Outlined rectangle
ctx.strokeRect(x, y, width, height);

// Clear rectangular area
ctx.clearRect(x, y, width, height);

Example 2: Drawing a Line

Lines are created using paths.

A path begins with beginPath(), moves to a starting coordinate, continues to another coordinate, and is finally rendered using stroke().

ctx.beginPath();

ctx.moveTo(20, 20);

ctx.lineTo(250, 150);

ctx.stroke();

Example 3: Drawing a Circle

Canvas does not provide a dedicated circle element.

Instead, circles and arcs are created using the arc() method.

ctx.beginPath();

ctx.arc(
    120,
    100,
    50,
    0,
    2 * Math.PI
);

ctx.stroke();

ctx.beginPath();

ctx.arc(
    120,
    100,
    50,
    0,
    2 * Math.PI
);

ctx.fillStyle = "blue";

ctx.fill();

Example 4: Drawing Text

Canvas can draw text using fillText() and strokeText().

ctx.font = "30px Arial";

ctx.fillText(
    "Hello Canvas",
    40,
    70
);

// Filled text
ctx.fillText("Hello Canvas", 40, 70);

// Outlined text
ctx.strokeText("Hello Canvas", 40, 70);

Example 5: Drawing an Image

Canvas can draw images using the drawImage() method.

The image must finish loading before it is drawn.

const img = new Image();

img.src = "logo.png";

img.onload = function () {
    ctx.drawImage(
        img,
        20,
        20
    );
};

ctx.drawImage(
    img,
    20,
    20,
    200,
    100
);

Complete Canvas Example

The following example combines HTML and JavaScript to create a complete canvas drawing.

<canvas
    id="myCanvas"
    width="400"
    height="250"
    style="border: 1px solid black;"
>
</canvas>

<script>
    const canvas =
        document.getElementById("myCanvas");

    const ctx =
        canvas.getContext("2d");


    // Draw rectangle

    ctx.fillStyle = "green";

    ctx.fillRect(
        40,
        40,
        150,
        100
    );


    // Draw text

    ctx.font = "24px Arial";

    ctx.fillStyle = "black";

    ctx.fillText(
        "Canvas Demo",
        40,
        180
    );
</script>

Canvas Drawing Process

Most Canvas programs follow the same basic workflow.

// 1. Select canvas

const canvas =
    document.getElementById("myCanvas");


// 2. Get context

const ctx =
    canvas.getContext("2d");


// 3. Configure drawing style

ctx.fillStyle = "blue";


// 4. Draw

ctx.fillRect(
    50,
    50,
    150,
    100
);

Canvas vs SVG

Canvas and SVG can both create graphics, but they use fundamentally different rendering models.

Browser Rendering Flow

When the browser processes a canvas application, the HTML element creates the surface and JavaScript provides the drawing instructions.

HTML Document
      │
      ▼
Find <canvas>
      │
      ▼
Create Blank Surface
      │
      ▼
Run JavaScript
      │
      ▼
Get 2D Context
      │
      ▼
Execute Drawing Commands
      │
      ▼
Update Pixels
      │
      ▼
Display Canvas

Real-World Applications

Canvas is widely used for dynamic and interactive visual applications.

Advantages of Canvas

Canvas provides important benefits for applications that require dynamic pixel-based graphics.

Common Beginner Mistakes

<!-- ❌ Only creates a blank canvas -->

<canvas
    width="400"
    height="300"
>
</canvas>


<!-- ✅ Canvas with JavaScript drawing -->

<canvas
    id="myCanvas"
    width="400"
    height="300"
>
</canvas>

<script>
    const canvas =
        document.getElementById("myCanvas");

    const ctx =
        canvas.getContext("2d");

    ctx.fillRect(
        0,
        0,
        100,
        100
    );
</script>

Best Practices

function update() {
    // Update positions,
    // physics,
    // game state,
    // or animation values.
}

function draw() {
    ctx.clearRect(
        0,
        0,
        canvas.width,
        canvas.height
    );

    // Draw the current scene.
}

function animate() {
    update();

    draw();

    requestAnimationFrame(animate);
}

animate();

Frequently Asked Questions

Key Takeaways

Summary

The HTML <canvas> element provides a blank pixel-based drawing surface that JavaScript can control.

Unlike SVG, Canvas does not represent every drawn shape as a separate vector element in the DOM.

JavaScript selects the canvas, obtains a drawing context, configures drawing styles, and executes commands that paint pixels onto the surface.

The 2D drawing context is created using getContext("2d").

Canvas uses a coordinate system that begins at the top-left corner, where positive X values move right and positive Y values move downward.

Rectangles can be created using fillRect() and strokeRect(), while clearRect() removes pixels from rectangular regions.

Lines and complex shapes are created using paths with methods such as beginPath(), moveTo(), lineTo(), stroke(), and fill().

Circles can be created using the arc() method, while text can be drawn using fillText() and strokeText().

Images can be rendered using drawImage(), but applications should wait until image resources have loaded.

Canvas drawing commands execute in sequence, and later commands can paint over earlier graphics.

Because Canvas does not automatically remember individual painted objects, applications normally maintain object state separately.

Games and animations commonly update application state, clear the previous frame, redraw the scene, and repeat the process using requestAnimationFrame().

Canvas is particularly useful for browser games, particle systems, drawing applications, image processing, simulations, and frequently changing visualizations.

SVG remains a better choice for many logos, icons, diagrams, and graphics that require individually accessible vector elements.

Developers should choose Canvas or SVG according to performance requirements, scalability, interaction, accessibility, and the type of graphics being created.

By understanding the drawing context, coordinate system, paths, shapes, images, animation workflow, resolution, and accessibility requirements, developers can create powerful dynamic graphics directly inside the browser.

In the next lesson, you will learn about HTML Meta Tags and how metadata provides important information about a webpage to browsers, search engines, and social platforms.