HTML5 Canvas API Basics

HTML5 introduced the <canvas> element — a blank slate where you can draw anything: shapes, text, images, animations. With JavaScript as your brush, the Canvas API opens up a new creative layer in your web development toolkit.

The <canvas> tag defines an area for drawing. It needs JavaScript to do the painting.

Basic Setup

<canvas id="myCanvas" width="300" height="150" style="border:1px solid #aaa;">
  Your browser does not support the canvas tag.
</canvas>>

<script>
  const canvas = document.getElementById('myCanvas');
  const ctx = canvas.getContext('2d');
</script>

[ A 300x150 canvas with a border appears ]

getContext('2d') gets a 2D drawing context — the API you'll use to render everything.

Draw a Rectangle

ctx.fillStyle = 'red';
ctx.fillRect(10, 10, 100, 50); // x, y, width, height

[ A solid red rectangle appears at (10,10) ]

Draw a Stroke-Only Rectangle

ctx.strokeStyle = 'green';
ctx.strokeRect(130, 10, 100, 50);

Clear a Part of the Canvas

ctx.clearRect(20, 20, 30, 20); // Erases part of the red rectangle

You can draw more than rectangles by creating paths.

Draw a Circle (Arc)

ctx.beginPath();
ctx.arc(75, 100, 30, 0, 2 * Math.PI); // x, y, radius, startAngle, endAngle
ctx.fillStyle = 'blue';
ctx.fill();

[ A filled blue circle appears ]

Draw a Triangle

ctx.beginPath();
ctx.moveTo(200, 80);
ctx.lineTo(250, 130);
ctx.lineTo(150, 130);
ctx.closePath();
ctx.strokeStyle = 'purple';
ctx.stroke();

• fillStyle: sets the fill color
• strokeStyle: sets the outline color
• lineWidth: defines stroke thickness

Example: Thicker Orange Border

ctx.strokeStyle = 'orange';
ctx.lineWidth = 5;
ctx.strokeRect(10, 80, 100, 50);

ctx.font = '20px Arial';
ctx.fillStyle = 'black';
ctx.fillText('Hello World', 10, 140); // text, x, y

[ "Hello World" appears on the canvas ]

You can also stroke text with strokeText:

ctx.strokeStyle = 'red';
ctx.strokeText('Cherry', 150, 140);

• Set explicit width and height attributes (not just via CSS)
• Always call beginPath() before new shapes
• Use layering: draw in order from background to foreground

With the Canvas API, you're not limited to pre-built HTML elements. You can:

• Draw filled and stroked shapes
• Control color, stroke, and line width
• Render styled text directly on canvas

It's pixel-level creativity — in your hands.

Choose the option that lists all and only the correct statements.

1. Setting the fill color using fillStyle
2. Setting the stroke color using strokeStyle
3. Using CSS classes for canvas content
4. Defining line width with lineWidth

Choose the option that lists all and only the correct statements.

1. The canvas content is resolution dependent and can be pixelated on zoom
2. Canvas supports layering like HTML elements do
3. You can save the canvas drawing as an image file
4. Canvas allows interaction with drawn shapes like native HTML elements

Up next, we’ll explore advanced Canvas techniques — animations, image manipulation, and dynamic interactions using mouse events.