Chapter 3.2☕ 15 min read

Canvas

Biryani plate draw karo — JavaScript se pixel level control.

01What is Canvas?

You know those beautiful biryani photos on restaurant websites? Now imagine drawing them yourself — not with a camera, but with code. Every grain of rice, every piece of mutton, every sprig of mint — drawn pixel by pixel using JavaScript.

The <canvas> element creates a blank drawing surface. Using the Canvas API (JavaScript), you can draw shapes, text, images, and animations. It's like having a digital paintbrush that follows your code.

🎨

Painting Analogy: Canvas is like a blank canvas sheet at Charminar art shop. The Canvas API is your paintbrush set. JavaScript instructions tell the brush where and what to paint.

02Canvas Basics

Setting up Canvas:

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

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

  // Now draw with ctx!
  ctx.fillStyle = '#f97316';  // Orange color
  ctx.fillRect(50, 50, 100, 80);  // x, y, width, height
</script>

<canvas> — The blank surface. Set width and height.
getContext('2d') — Get the drawing tool. Always needed.
fillStyle — Color for filling shapes.
strokeStyle — Color for borders/outlines.
lineWidth — Thickness of lines.

03Canvas Drawing Methods

Canvas lets you draw these shapes:

fillRect / strokeRect — Rectangles and squares
arc() — Circles, semi-circles, pie slices
moveTo + lineTo — Lines and paths
fillText / strokeText — Text with font styling
createLinearGradient — Gradient fills
drawImage — Draw images onto canvas

04How Canvas Works — Flow

Get canvas elementdocument.getElementById

→

Get contextcanvas.getContext('2d')

→

Draw shapesSet styles and call drawing methods

05Exercise — Draw a Biryani Plate

Draw a biryani plate using Canvas shapes.

<!-- canvas: 500x400 -->
<!-- Draw: plate oval, rice, meat pieces, mint garnish -->

Done — Key Points:

✅ <canvas> creates a blank drawing surface
✅ getContext('2d') gets the drawing API
✅ fillRect, arc, moveTo/lineTo draw shapes
✅ fillStyle sets colors, gradients, patterns
✅ Canvas is pixel-based — animatable at 60fps

Previous3.1 — HTML5 APIs 📋 All Chapters Next Chapter3.3 — Web Storage →