HTML Canvas

The Canvas Container

The canvas tag defines a blank drawing board on your webpage. It is a simple container element that requires explicit width and height attributes to define its resolution, and some fallback text inside for older browsers.

Example: The Canvas Container

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

The Drawing Context

Before you can draw on your canvas, you must write a script to capture the element's ID and declare its drawing context (like 2d), which prepares the browser with the tools and coordinate system needed to paint on it.

Example: The Drawing Context

<canvas id="myCanvas" width="200" height="100"></canvas>
<script>
  const ctx = document.getElementById('myCanvas').getContext('2d');
</script>

Drawing Rectangles

The 2D canvas context provides three easy-to-use methods to draw rectangles directly on your board: fillRect (to draw a solid rectangle), strokeRect (to draw a hollow rectangular outline), and clearRect (to erase an area).

Example: Drawing Rectangles

<canvas id="myCanvas" width="200" height="100"></canvas>
<script>
  const ctx = document.getElementById('myCanvas').getContext('2d');
  ctx.fillStyle = 'blue';
  ctx.fillRect(10, 10, 100, 50);
</script>

Drawing Lines and Paths

To draw custom shapes, curves, or circles, you must use path methods. Drawing a path is like drawing with a pencil: you tell the browser to place the pencil on the board (beginPath), trace the lines (lineTo), and paint the result (stroke or fill).

Example: Drawing Lines and Paths

<canvas id="myCanvas" width="200" height="100"></canvas>
<script>
  const ctx = document.getElementById('myCanvas').getContext('2d');
  ctx.beginPath();
  ctx.lineTo(150, 80);
  ctx.stroke();
</script>

Clearing and Updating the Canvas

To create dynamic animations, interactive drawing boards, or game frames, you must frequently update your canvas.

You do this by erasing the entire board using clearRect, updating your shape coordinates, and painting the new frames in rapid succession.

Example: Clearing and Updating the Canvas

<canvas id="myCanvas" width="200" height="100"></canvas>
<script>
  const ctx = document.getElementById('myCanvas').getContext('2d');
  ctx.clearRect(0, 0, 200, 100);
  ctx.fillRect(10, 10, 50, 50);
</script>

Drawing Text on Canvas

The fillText and strokeText methods let you draw text directly onto the canvas, with the font property controlling size and typeface beforehand.

Unlike regular HTML text, canvas text is just pixels — it cannot be selected, searched, or read by screen readers.

Example: Drawing Text on Canvas

<canvas id="myCanvas" width="200" height="100"></canvas>
<script>
  const ctx = document.getElementById('myCanvas').getContext('2d');
  ctx.font = '20px Arial';
  ctx.fillText('Hello Canvas', 10, 50);
</script>

Drawing Images onto Canvas

The drawImage method lets you place an existing image file onto the canvas, and you can also control its position and size, or even crop and scale it.

This is the basis for building things like image editors, filters, or dynamic thumbnail generators entirely in the browser.

Example: Drawing Images onto Canvas

<canvas id="myCanvas" width="200" height="100"></canvas>
<script>
  const img = new Image();
  img.src = 'photo.jpg';
  img.onload = function () {
    document.getElementById('myCanvas').getContext('2d').drawImage(img, 0, 0);
  };
</script>

Saving Canvas as an Image

The toDataURL method converts whatever is currently drawn on the canvas into a downloadable image file, encoded as a base64 data URL. This is how in-browser tools let users export a chart, drawing, or edited photo as an actual PNG or JPEG file.

Example: Saving Canvas as an Image

<canvas id="myCanvas" width="200" height="100"></canvas>
<script>
  const dataURL = document.getElementById('myCanvas').toDataURL('image/png');
</script>