HTML Canvas

Definition and Usage

The HTML <canvas> element adds a bitmap drawing surface to the page. You paint on it with JavaScript through the Canvas API—rectangles, paths, text, images, and frame-by-frame animation.

What does HTML provide?

HTML declares the surface: size (width / height), an id for script, and optional fallback text between the tags. Drawing itself is not markup—it is script calling methods on a 2D context.

How do you start drawing?

Select the element, then call getContext('2d'). That returns a CanvasRenderingContext2D object. Set styles (fillStyle, strokeStyle) and call methods like fillRect, arc, and fillText.

Canvas hub vs canvas tag page

This tutorial focuses on drawing graphics on an HTML page with the 2D Canvas API. Attribute-level detail for the element itself lives on HTML canvas Tag. For scalable vector markup, see HTML SVG.

HTML Syntax

Place a canvas on the page, then draw with a short script:

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

<script>
  const canvas = document.getElementById("board");
  const ctx = canvas.getContext("2d");
  ctx.fillStyle = "#22c55e";
  ctx.fillRect(20, 20, 120, 80);
</script>

Core HTML Concepts

Pieces that make canvas drawing work on a page:

Common 2D drawing methods

Canvas vs SVG (for HTML authors)

How to Draw with Canvas in HTML

A practical workflow:

1. Add <canvas id="…" width="…" height="…"> with fallback text.
2. In script, document.getElementById(…) (or query after DOM ready).
3. Call getContext("2d") and keep the context in a variable.
4. Set styles (fillStyle, font, lineWidth).
5. Draw shapes, paths, or text; clear and redraw for animation.
6. For meaningful visuals, add aria-label or an HTML caption / data table.

Live Preview

Change the fill color—the same <canvas> redraws with fillRect and fillText.

HTML Examples

Six patterns: rectangle setup, circle, fill and stroke, text, animation, and a combined scene.

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

var ctx = document.getElementById("c").getContext("2d");
ctx.beginPath();
ctx.arc(150, 150, 60, 0, Math.PI * 2);
ctx.fillStyle = "#3b82f6";
ctx.fill();

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

ctx.font = "30px Arial";
ctx.fillStyle = "#1e293b";
ctx.fillText("Hello, Canvas!", 40, 80);

var x = 0;
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();

<canvas id="myCanvas" width="500" height="300"
  style="border:1px solid #ccc"></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>

Key Takeaways