Suggest an edit

Improve this article

Refine the answer for “What is the Canvas API?”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

## 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` |

Markdown · drag & drop images · ⌘B / ⌘I shortcuts598 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.