📘 Lesson · Lesson 29

Canvas Basics

What Canvas Is

The <canvas> element is a blank drawing board in your page — a rectangle of pixels you paint on using JavaScript. Charts, games, image editors, signature pads, data visualisations: all built on canvas. The tag itself is empty; ALL the drawing happens in JavaScript. Think of it as a whiteboard: HTML nails the blank board to the wall (the tag), JavaScript is the marker that draws on it.

<canvas id="board" width="300" height="200"></canvas>

[ a 300×200 invisible rectangle - blank until JavaScript draws ]

Set width and height as attributes (not CSS) — they define the actual pixel grid you draw on. Sizing with CSS instead stretches the drawing blurrily, a classic canvas gotcha.

The Two-Part Setup — every canvas starts here

<canvas id="board" width="300" height="200"></canvas>

<script>
    // 1. Get the canvas element
    const canvas = document.getElementById("board");
    // 2. Get its "2D context" - the actual paintbrush toolbox
    const ctx = canvas.getContext("2d");

    // now draw with ctx...
    ctx.fillStyle = "tomato";
    ctx.fillRect(20, 20, 100, 60);   // x, y, width, height
</script>

[ a tomato-red rectangle appears near the top-left of the board ]

The context (ctx) is the key idea. The canvas is the board; getContext("2d") hands you the box of 2D drawing tools — every shape, colour and line comes from ctx methods. (There is also "webgl" for 3D, a separate world.) You will always see these two lines first: get the canvas, get its context.

The Coordinate System — top-left is (0,0)

(0,0) ────────────► x increases RIGHT
  │
  │      (20,20)
  │        ┌──────┐
  │        │ rect │
  │        └──────┘
  ▼
  y increases DOWNWARD

The gotcha that trips maths students: unlike a maths graph, canvas y grows downward — (0,0) is the TOP-left corner, and y=200 is at the BOTTOM. So fillRect(20, 20, 100, 60) means: start 20 px from left, 20 px from top, draw 100 wide and 60 tall. Every position on the canvas is measured from that top-left origin.

Drawing: Rectangle, Line, Circle, Text

// RECTANGLE (filled)
ctx.fillStyle = "navy";
ctx.fillRect(10, 10, 80, 50);

// LINE
ctx.beginPath();
ctx.moveTo(10, 100);      // pen down here
ctx.lineTo(150, 100);     // draw to here
ctx.stroke();             // make it visible

// CIRCLE (arc)
ctx.beginPath();
ctx.arc(200, 100, 40, 0, 2 * Math.PI);   // x, y, radius, start, end
ctx.fillStyle = "gold";
ctx.fill();

// TEXT
ctx.font = "20px Arial";
ctx.fillText("Alpine School", 10, 180);

[ navy rectangle top-left, a horizontal line, a gold circle, and "Alpine School" text near the bottom ]

Pattern to notice: fill... methods paint solid; stroke draws outlines; paths (line/circle) start with beginPath(). A full canvas deep-dive belongs to JavaScript — here the goal is to recognise canvas and understand its shape.

Canvas vs SVG — pick the right tool

	Canvas	SVG (next chapter)
Nature	Pixels — a painted image	Shapes — real elements in the page
After drawing	Forget it — can't edit a shape	Each shape stays editable via CSS/JS
Scaling	Blurs when enlarged	Stays sharp at any size
Best for	Games, many objects, photo editing	Logos, icons, charts you interact with

Rule of thumb: thousands of moving particles or a game → canvas; a crisp scalable logo or an interactive chart → SVG. They complement rather than compete.

Exam Corner

Q: What is the canvas element? A blank pixel area you draw on using JavaScript.

Q: Two lines every canvas starts with? getElementById to get the canvas, then getContext("2d") for the drawing tools.

Q: Where is the canvas origin (0,0)? Top-left corner; y increases downward.

Q: fillRect(x, y, w, h) — what are the arguments? x and y of the top-left corner, then width and height.

Q: Canvas vs SVG for a scalable logo? SVG — it stays sharp at any size; canvas would blur.

Canvas क्या है

<canvas> page पर एक खाली drawing board है, जिस पर आप JavaScript से चित्र बनाते हैं. HTML सिर्फ खाली कैनवास (चित्रफलक) टाँग देता है; असली drawing — रेखाएँ, आकार, रंग, text, यहाँ तक कि animation — JavaScript से होती है. इसका इस्तेमाल games, charts और graphs, image editors, और visual effects में होता है. यह tag अकेला कुछ नहीं दिखाता, इसलिए इसे "HTML + JavaScript की जोड़ी" समझिए.

दो-हिस्से का Setup

<!-- 1. HTML: canvas rakho, width/height ATTRIBUTES se do -->
<canvas id="myCanvas" width="400" height="300"></canvas>

// 2. JavaScript: canvas pakdo aur uska "context" lo
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");    // 2d drawing tools

ctx.fillStyle = "blue";
ctx.fillRect(20, 20, 150, 100);         // ek neela rectangle

दो कदम हमेशा एक जैसे रहते हैं: canvas को getElementById से पकड़िए, फिर getContext("2d") से drawing tools का सेट लीजिए. वह ctx object ही आपका ब्रश है — हर drawing command उसी पर चलती है. एक अहम चेतावनी: canvas का आकार हमेशा HTML width/height attributes से दीजिए, CSS से नहीं. CSS से आकार देने पर drawing खिंचकर धुंधली हो जाती है, जैसे छोटी तस्वीर को ज़बरदस्ती बड़ा करने पर होता है.

Coordinate System

(0,0) ────────────► x badhta hai
  │
  │      • (150, 80)
  │
  ▼
y badhta hai (NEECHE ki taraf!)

Canvas का origin (0,0) ऊपर-बाएँ कोने पर है. x दाईं ओर बढ़ता है (सामान्य), पर y नीचे की ओर बढ़ता है — गणित की कक्षा के उलट, जहाँ y ऊपर जाता था. तो (150, 80) मतलब 150px दाएँ, 80px नीचे. शुरुआत में यही बात सबसे ज़्यादा उलझाती है. यही नियम CSS के translateY में भी था — screen पर y हमेशा नीचे की ओर.

Drawing: Rect, Line, Circle, Text

// Bhara hua rectangle (x, y, chaudai, oonchai)
ctx.fillStyle = "tomato";
ctx.fillRect(10, 10, 120, 80);

// Sirf border wala rectangle
ctx.strokeStyle = "navy";
ctx.lineWidth = 3;
ctx.strokeRect(150, 10, 120, 80);

// Rekha
ctx.beginPath();
ctx.moveTo(10, 120);      // pen yahan rakho
ctx.lineTo(270, 120);     // yahan tak kheencho
ctx.stroke();             // ab dikhao

// Vritt (circle)
ctx.beginPath();
ctx.arc(80, 200, 40, 0, Math.PI * 2);   // (x, y, radius, shuru, ant)
ctx.fillStyle = "seagreen";
ctx.fill();

// Text
ctx.font = "20px Arial";
ctx.fillStyle = "black";
ctx.fillText("CodeKaFunda", 150, 200);

Pattern हर बार वही है: पहले रंग/शैली set कीजिए (fillStyle, strokeStyle), फिर आकार बनाइए. fill... वाले command आकार को भरते हैं, stroke... वाले सिर्फ किनारा खींचते हैं. रेखाओं और circles के लिए beginPath() से शुरू करना ज़रूरी है, वरना नया आकार पिछले से जुड़ जाता है — यह सबसे आम canvas bug है. Circle में Math.PI * 2 मतलब पूरा 360°.

Canvas vs SVG

	Canvas	SVG
प्रकृति	Pixels (bitmap)	Shapes (vector)
Zoom करने पर	धुंधला	हमेशा साफ
हज़ारों objects	तेज़ ✓	धीमा
किसी shape पर click	खुद हिसाब लगाइए	आसान (हर shape एक element)
सबसे अच्छा	Games, animation	Icons, charts, logo

सरल नियम: बहुत सारी तेज़ी से बदलती चीज़ें (game, particle effect) → Canvas. साफ, scalable, clickable graphics (icon, chart, नक्शा) → SVG. Canvas एक बार draw करके भूल जाता है — pixels रंग दिए, अब वह shape "मौजूद" नहीं. SVG में हर shape असली DOM element है, इसलिए उस पर CSS और click event लग सकते हैं.

Exam Corner

Q: Canvas अकेले HTML से क्या दिखाता है? कुछ नहीं — drawing JavaScript से होती है.

Q: Canvas का आकार CSS से क्यों नहीं देना चाहिए? Drawing खिंचकर धुंधली हो जाती है; width/height attributes use कीजिए.

Q: getContext("2d") क्या देता है? Drawing के सारे tools वाला context object.

Q: Canvas में (0,0) कहाँ है और y किधर बढ़ता है? ऊपर-बाएँ कोने पर; y नीचे की ओर बढ़ता है.

Q: Game के लिए Canvas या SVG? Canvas — हज़ारों तेज़ी से बदलते objects के लिए यह तेज़ है.

← Back to HTML Tutorial

💻 Live Code Editor

इस पेज का code यहाँ तैयार है — बदलिए और तुरंत नतीजा देखिए. कुछ install किए बिना.

👁 Live Preview

सब कुछ आपके browser में ही चलता है — कोई server, कोई signup नहीं. JavaScript का console.log देखने के लिए F12 दबाइए.