What is the Canvas API?

JavaScriptMiddle~2 min read

Definition

Canvas API is a JavaScript interface for drawing 2D (and partially 3D) graphics in a <canvas> element on a web page.

Simply put: Canvas is a "surface" on which you can draw points, lines, shapes, text, images, and animations.

1. Basic idea

javascript

<canvas id="myCanvas" width="400" height="300"></canvas>

javascript

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d'); // get the 2D context (drawing tools)

// Example: draw a rectangle
ctx.fillStyle = 'skyblue';
ctx.fillRect(50, 50, 200, 100);

The result: a sky-blue rectangle appears on the page.

2. Coordinate system

The origin (0, 0) is in the top-left corner of the canvas.
x increases to the right,
y increases downward.

javascript

(0,0) ─────────► x
 │
 ▼
 y

3. Main 2D Canvas API methods

Method	What it does
`fillRect(x, y, w, h)`	Draws a filled rectangle
`strokeRect(x, y, w, h)`	A rectangle with an outline
`clearRect(x, y, w, h)`	Clears an area of the canvas
`beginPath()`	Start a new path (for shapes, lines)
`moveTo(x, y)`	Move the "pen" without drawing
`lineTo(x, y)`	Draw a line to a point
`arc(x, y, r, start, end)`	Draw an arc or circle
`fill()` / `stroke()`	Fill or outline a shape
`fillText(text, x, y)`	Draw text
`drawImage(img, x, y)`	Draw an image
`translate(x, y)` / `rotate(a)` / `scale(x, y)`	Transformations (shift, rotation, scale)

4. Examples

Circle:

javascript

ctx.beginPath();
ctx.arc(150, 100, 50, 0, Math.PI * 2);
ctx.fillStyle = 'orange';
ctx.fill();

Line:

javascript

ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(250, 150);
ctx.strokeStyle = 'red';
ctx.lineWidth = 3;
ctx.stroke();

Text:

javascript

ctx.font = '24px Arial';
ctx.fillStyle = 'black';
ctx.fillText('Hello, Canvas!', 50, 250);

5. Animations

Canvas is perfect for games and animations, usually with requestAnimationFrame().

javascript

let x = 0;
function animate() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.fillRect(x, 100, 50, 50);
  x += 2;
  requestAnimationFrame(animate);
}
animate();

The square moves smoothly across the screen, without lag.

6. Canvas vs SVG

Criterion	Canvas	SVG
Approach	Raster (pixels)	Vector (DOM objects)
Scaling	Loses quality	Does not lose quality
Changing elements	Hard (redraw manually)	Easy (via DOM/JS)
Performance	Excellent for animations, games	Excellent for diagrams and charts
Use case	Games, visualizations, renders	Icons, charts, interfaces

The idea is simple:

SVG = structure (DOM)
Canvas = drawing (pixels)

7. Extensions

Canvas API comes in:

2d, for regular 2D drawings (the main option);
webgl, for 3D graphics using the GPU;
webgl2, a newer version with extended capabilities.

javascript

const gl = canvas.getContext('webgl'); // WebGL API (3D)

Examples of Canvas API usage

In real projects, Canvas is used for:

data charts and visualizations (Chart.js, D3.js),
2D games (Phaser.js),
drawing (Paint, graphic editors),
video post-processing (face filters, AR),
animations and effects (particles, waves, backgrounds).

Summary

What it does	Canvas API
Lives in	The `<canvas>` element
How it works	Through pixels, not the DOM
What you can draw	Shapes, text, images, animations
Performance	Very high
Main use	Games, visualizations, effects
Main object	`CanvasRenderingContext2D`

Short Answer

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.