Demon Tech Roadmap

HTML

HTML Canvas

HTML canvas draws dynamic graphics on a web page.

Read Time

5 min read

Difficulty

Beginner

Last Updated

Jun 15, 2026

Version

v1.0.0

Introduction

HTML provides the `

Syntax

1<!-- canvas syntax -->
2<canvas id="game" width="400" height="400"></canvas>

Example

1<!-- this creates a canvas -->
2<!DOCTYPE html>
3<html lang="en">
4  <head>
5    <meta charset="UTF-8">
6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7    <title>Canvas</title>
8  </head>
9  <body>
10    <canvas id="board" width="200" height="100" style="border:1px solid black;"></canvas>
11  </body>
12</html>

Try it Yourself

Hands-on Practice

Modify the code below to see how it affects the output. This is the best way to learn!

Interactive Editor

1234567891011121314151617181920

Live Preview

Key Points

The `
JavaScript handles all the actual drawing.
Canvas renders pixels directly to the screen.
It supports 2D and 3D graphics.

Up Next

Continue your journey with the next topic.

Go to HTML SVG ❯