HTML · Links and media

canvas

A bitmap drawing surface controlled by JavaScript. Provide fallback text and an accessible alternative.

htmlRunnable example html course

Syntax

<canvas id="…"></canvas>

Example

Try it

<canvas id="chart" width="240" height="120">
  A bar chart of weekly practice.
</canvas>
<script>
  const ctx = document.getElementById('chart').getContext('2d');
  ctx.fillStyle = '#e4472b';
  ctx.fillRect(20, 40, 200, 60);
</script>

Learn this in the course

Reference pages are the quick answer. The course explains the why, shows the full example and ends with a challenge.

Open the course

canvas

Example

More in this group

Learn this in the course