Syllabus

On this page

HTML Canvas (2D Drawing API) 🔥

Badar KhalilUpdated September 27, 2026 3 min read

HTML Canvas (2D Drawing API)

The <canvas> element gives you a blank, pixel-based drawing surface directly in the browser. Using JavaScript, you can draw shapes, lines, text, images, and even build full animations and games — all without any external library. This is one of the most powerful and trending topics 🔥 in modern web development, powering everything from data visualizations and charting libraries to browser-based games and generative art.

What Is the Canvas Element?

<canvas> is just a container in your HTML. On its own it draws nothing — it needs a JavaScript rendering context to actually draw pixels onto it.

Code

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

Getting the 2D Context

You access the drawing API through getContext('2d'), which returns an object with all the drawing methods you'll use.

Code

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

Drawing Shapes

The Canvas API gives you built-in methods for rectangles, and a flexible path system for any custom shape.

Code

// Filled rectangle
ctx.fillStyle = 'dodgerblue';
ctx.fillRect(20, 20, 150, 100);

// Stroked (outlined) rectangle
ctx.strokeStyle = 'darkred';
ctx.lineWidth = 4;
ctx.strokeRect(200, 20, 150, 100);

Drawing Paths (Lines, Circles, Custom Shapes)

For anything more complex than a rectangle, you build a path using beginPath(), move and draw commands, and then fill() or stroke() it.

Code

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

// Line
ctx.beginPath();
ctx.moveTo(50, 300);
ctx.lineTo(350, 300);
ctx.strokeStyle = 'black';
ctx.stroke();

Adding Text

Canvas can render styled text directly onto the pixel surface — useful for watermarks, dynamic banners, and chart labels.

Code

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

Drawing Images

You can also draw existing images onto the canvas, which is the foundation of photo editors and meme generators built in the browser.

Code

const img = new Image();
img.src = 'photo.jpg';
img.onload = function() {
  ctx.drawImage(img, 0, 0, 200, 150);
};

Animation with requestAnimationFrame

Real-time animation (a trending use-case for browser games and interactive dashboards) is done by clearing and redrawing the canvas repeatedly using requestAnimationFrame, which syncs drawing with the screen's refresh rate for smooth motion.

Code

let x = 0;
function animate() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.beginPath();
  ctx.arc(x, 100, 20, 0, Math.PI * 2);
  ctx.fillStyle = 'purple';
  ctx.fill();
  x = (x + 2) % canvas.width;
  requestAnimationFrame(animate);
}
animate();

Canvas vs SVG: When to Use Canvas

Canvas is pixel-based (immediate mode) — great for performance-heavy scenes with lots of moving objects, like games, particle effects, or real-time data visualizations, because the browser doesn't need to track thousands of individual DOM elements.

Common Beginner Mistakes

Forgetting to call clearRect() before redrawing each animation frame, causing motion trails
Setting width/height via CSS instead of HTML attributes, which stretches and blurs the drawing
Not waiting for images to load (onload) before calling drawImage()

Live Example

Edit the code below to change colors, shapes, or the animation speed and see the canvas update instantly.

Try it Yourself HTML

<canvas id='demoCanvas' width='400' height='250' style='border:1px solid #ccc; background:#fafafa;'></canvas>

Output

Press Run to execute.

Try it Yourself JAVASCRIPT

const canvas = document.getElementById('demoCanvas');
const ctx = canvas.getContext('2d');

// Rectangle
ctx.fillStyle = 'dodgerblue';
ctx.fillRect(20, 20, 120, 80);

// Circle
ctx.beginPath();
ctx.arc(280, 60, 40, 0, Math.PI * 2);
ctx.fillStyle = 'orange';
ctx.fill();

// Line
ctx.beginPath();
ctx.moveTo(20, 150);
ctx.lineTo(380, 150);
ctx.strokeStyle = 'black';
ctx.lineWidth = 3;
ctx.stroke();

// Text
ctx.font = '20px Arial';
ctx.fillStyle = 'black';
ctx.fillText('Canvas 2D Drawing!', 60, 210);

Output

Press Run to execute.

Try it Yourself JAVASCRIPT

const canvas2 = document.getElementById('demoCanvas');
const ctx2 = canvas2.getContext('2d');
let x = 0;

function animate() {
  ctx2.clearRect(0, 0, canvas2.width, canvas2.height);
  ctx2.beginPath();
  ctx2.arc(x, 125, 20, 0, Math.PI * 2);
  ctx2.fillStyle = 'purple';
  ctx2.fill();
  x = (x + 3) % canvas2.width;
  requestAnimationFrame(animate);
}
animate();

Output

Press Run to execute.

Exercise: Draw a Simple Smiley FaceJAVASCRIPT

Using the 2D canvas context, draw a smiley face: one large yellow circle for the face, two small black circles for eyes, and an arc for the mouth.

Try it Yourself JAVASCRIPT

const canvas = document.getElementById('demoCanvas');
const ctx = canvas.getContext('2d');

// TODO: draw yellow face circle

// TODO: draw two small black eye circles

// TODO: draw a curved arc for the mouth

Output

Press Run to execute.

Show expected output

A canvas drawing showing a yellow circular face, two black eye circles, and a curved mouth arc.

This is a self-check — compare your result with the expected output above.

Was this page helpful?