What If You Could Draw With Code?

Imagine creating a game, drawing colorful shapes, or designing an animated scene — all inside your browser. That’s what HTML Canvas makes possible!

The <canvas> element creates a drawing surface. JavaScript tells the browser what to draw on that surface.

Meet the <canvas> Element

First, create a canvas in HTML. Then select it with JavaScript and request its 2D drawing context.

<canvas id="myCanvas" width="400" height="200">
  Your browser does not support canvas.
</canvas>

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

  ctx.fillStyle = "#39d5ed";
  ctx.fillRect(30, 30, 150, 80);
</script>

getContext("2d") gives you access to the 2D drawing tools. The fillRect() method draws a filled rectangle.

Rectangles, Circles & Lines

Canvas uses coordinates. The top-left corner is (0, 0), and values increase as you move right or down.

// Filled rectangle
ctx.fillStyle = "#39d5ed";
ctx.fillRect(20, 20, 120, 70);

// Circle
ctx.beginPath();
ctx.arc(220, 60, 35, 0, Math.PI * 2);
ctx.fillStyle = "#4ee4a1";
ctx.fill();

// Line
ctx.beginPath();
ctx.moveTo(20, 140);
ctx.lineTo(300, 140);
ctx.strokeStyle = "#f59e0b";
ctx.lineWidth = 5;
ctx.stroke();

arc() draws a circular arc using a center point, radius, and starting and ending angles. A full circle runs from 0 to Math.PI * 2.

Bring Your Graphics to Life

Canvas supports colors, outlines, transparency, and gradients. You can make a drawing as simple or detailed as you like.

ctx.fillStyle = "#4ee4a1";
ctx.fillRect(20, 20, 100, 60);

ctx.strokeStyle = "#39d5ed";
ctx.lineWidth = 4;
ctx.strokeRect(150, 20, 100, 60);

const gradient = ctx.createLinearGradient(0, 100, 300, 100);
gradient.addColorStop(0, "#39d5ed");
gradient.addColorStop(1, "#4ee4a1");

ctx.fillStyle = gradient;
ctx.fillRect(20, 100, 230, 50);

Use fillStyle for filled shapes and strokeStyle for outlines. Gradients help you create smooth transitions between colors.

Write on Your Canvas

Canvas isn’t limited to shapes. You can draw text too!

ctx.font = "bold 28px Arial";
ctx.fillStyle = "#176b76";
ctx.fillText("Hello, mC0de!", 30, 60);

ctx.font = "16px Arial";
ctx.fillStyle = "#475569";
ctx.fillText("I made this with JavaScript!", 30, 95);

The font property controls the text appearance, and fillText() draws text at the specified coordinates.

Change Your Drawing Anytime

Unlike HTML elements, canvas shapes aren’t automatically remembered as individual objects. To update a scene, you usually clear part or all of the canvas and draw the new scene.

ctx.clearRect(0, 0, canvas.width, canvas.height);

ctx.fillStyle = "#0f172a";
ctx.fillRect(0, 0, canvas.width, canvas.height);

ctx.fillStyle = "#4ee4a1";
ctx.beginPath();
ctx.arc(120, 80, 35, 0, Math.PI * 2);
ctx.fill();

For animation, developers often redraw the scene using requestAnimationFrame(). We’ll explore more JavaScript techniques in future lessons.

Draw Smarter, Not Harder

• Use descriptive canvas IDs and organized JavaScript.
• Understand the coordinate system before drawing.
• Use beginPath() when starting a new path.
• Set appropriate drawing dimensions to avoid distortion.
• Keep important information accessible outside the canvas.
• Use SVG instead when you need individually accessible, scalable vector elements.

Canvas is especially powerful for games, visualizations, animations, and freeform drawing.