NS
Guest Mode:

BCA Student Stories & UpdatesLive

Live GitHub Pages
You
Your StorySign in & share
Er. Manoj Kumar
D5
Er. ManojActive nowPages
Day 42Advanced JavaScript & Browser APIs2.5 Hours Practical
Push to GitHub to Complete

HTML5 2D Canvas API Fundamentals (Coordinates, Shapes & Paths)

The HTML5 <canvas> element provides a resolution-dependent bitmap canvas that can be drawn on dynamically using JavaScript. Unlike regular DOM elements, canvas operates as an immediate-mode raster drawing surface, making it the industry foundation for web games, charts, signature pads, and image manipulation.

Interactive Learning Roadmap

Day 42 Step-by-Step Practical Flow

🎯1. What You Will Learn Today

✔Initialize an HTML5 <canvas> element and access its 2D rendering context (canvas.getContext("2d")).
✔Master the Canvas coordinate grid system (X-axis left-to-right, Y-axis top-to-bottom from top-left origin 0,0).
✔Draw geometric primitives: fillRect(), strokeRect(), and clearRect().
✔Construct custom vector shapes using path routines: beginPath(), moveTo(), lineTo(), and stroke().
✔Render smooth circles and arcs using the arc(x, y, radius, startAngle, endAngle) method.
Day 42 MasterclassAdvanced JavaScript & Browser APIs

HTML5 2D Canvas API Fundamentals (Coordinates, Shapes & Paths) — Comprehensive Practical Guide

Har concept ko visual mental models, code anatomy aur practical industry tips ke sath samjhein.

Real-World Purpose Aur Zaroorat

The HTML5 <canvas> element provides a resolution-dependent bitmap canvas that can be drawn on dynamically using JavaScript. Unlike regular DOM elements, canvas operates as an immediate-mode raster drawing surface, making it the industry foundation for web games, charts, signature pads, and image manipulation.

Rendering Context: The <canvas> tag is simply an empty container. All visual rendering is performed through the context object obtained via const ctx = canvas.getContext("2d").
Coordinate Origin: (0, 0) is situated at the TOP-LEFT corner of the canvas. Positive X extends rightwards, and positive Y extends downwards.
Fill vs Stroke: fillStyle and fillRect create solid filled shapes; strokeStyle and strokeRect render outlines.
Path Construction: Always start a new line or vector shape with ctx.beginPath(); otherwise subsequent strokes will connect to previously drawn points.
Angles in Radians: Canvas trigonometric methods expect angles in radians (radians = degrees * Math.PI / 180). A complete circle spans 0 to 2 * Math.PI.
Dimaag Mein Bithane Ka Model

"Think of the <canvas> element like an artist blank linen canvas mounted on an easel, and the 2D rendering context (ctx) like the artist paintbrush and palette. You command the brush where to move and when to apply paint."

💡 Pro Tip: Code ko ratta mat maaro; imagine karo ki browser har tag ko visually kaise draw karta hai.

👨‍🏫3. Teacher Demonstration Code

See how rectangles, diagonal lines, and smooth circular badges are painted programmatically on a single canvas element.

Canvas Shapes, Gradients & Coordinate Demonstrationhtml
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Canvas 2D Fundamentals</title>
  <style>
    body { font-family: system-ui, sans-serif; background: #060c18; color: #fff; padding: 24px; text-align: center; }
    canvas { background: #0c1328; border: 2px solid #1e293b; border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,0.5); }
  </style>
</head>
<body>
  <h2>🎨 HTML5 2D Canvas Primitives</h2>
  <canvas id="myCanvas" width="480" height="280"></canvas>

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

    ctx.fillStyle = "#2563eb";
    ctx.fillRect(30, 30, 100, 70);

    ctx.strokeStyle = "#38bdf8";
    ctx.lineWidth = 3;
    ctx.strokeRect(160, 30, 100, 70);

    ctx.beginPath();
    ctx.moveTo(300, 100);
    ctx.lineTo(360, 30);
    ctx.lineTo(420, 100);
    ctx.strokeStyle = "#c1a648";
    ctx.lineWidth = 4;
    ctx.stroke();

    ctx.beginPath();
    ctx.arc(240, 190, 50, 0, Math.PI * 2);
    ctx.fillStyle = "#04AA6D";
    ctx.fill();
  </script>
</body>
</html>

2. Hands-On Practical Lab: Follow Instructions in VS Code

Code like a professional software engineer! Follow the step-by-step instructions below in Visual Studio Code (VS Code) on your PC, test your output locally, and push to GitHub.

3 Coding Tasks
Interactive Coding TestAuto-Evaluates as you type

Day 42 Practical Task Test Studio

Test Score:0 / 3 Passed
1. Practical Task Specifications & Live Test Checklist:Type code below to pass tests
Task 1Obtain 2D Rendering Context

Select canvas element by id "artboard" and retrieve its 2d context into a variable named ctx.

⏳ WAITING
Task 2Draw Filled Rectangle

Set the fillStyle to "#38bdf8" and draw a filled rectangle at (50, 50) with width 120 and height 80.

⏳ WAITING
Task 3Draw a Circle with arc()

Use beginPath(), arc() with 0 to Math.PI * 2, and fill() to render a circle.

⏳ WAITING
2. Type HTML & CSS Code:index.html
index.html
⚡ Real-Time Testing Active
Tab inserts 2 spaces • Live DOM refresh167 chars
Live Browser Output:
🔒 http://localhost:5500/index.html
Live
Renders live HTML & CSS typed on the left.
Interactive Bug Detective

Spot the Bug: Canvas Dimension Scaling Distortion

Tap or click on the exact line below that contains the error:

Click any code line
⚠️ Broken Code Inspector
Tap buggy line
1
<!-- HTML -->
2
<canvas id="stage" style="width: 500px; height: 400px;"></canvas>
3
4
<script>
5
const ctx = document.getElementById("stage").getContext("2d");
6
ctx.beginPath();
7
ctx.arc(100, 100, 50, 0, Math.PI * 2);
8
ctx.stroke();
9
</script>
Stuck? Need a detective clue before checking the solution?

Senior Developer Forensic Analysis:

Canvas has TWO sizes: the drawing buffer coordinate size (defined via HTML width and height attributes) and the CSS display size. If width/height attributes are omitted, the drawing buffer defaults to 300x150 pixels. Applying CSS width/height stretches those 300x150 pixels like an image, distorting all aspect ratios.

Golden Rule: Always validate code syntax and security attributes before pushing to GitHub!

📝Independent Practice: Assignment

📄 index.html

Interactive Geometric Flag & University Badge Painter

  • •Initialize an HTML5 canvas with width=600 and height=400.
  • •Paint a stylized dark background with a 3-stripe horizontal flag or banner.
  • •In the center, construct a circular gold emblem using ctx.arc().
  • •Add text onto the canvas using ctx.font, ctx.textAlign = "center", and ctx.fillText().
  • •Provide an interactive "Clear Canvas" button that invokes ctx.clearRect(0, 0, canvas.width, canvas.height).
Submission Evaluation Criteria: Push canvas-primitives.html to your GitHub repository under day-42.
Exact Assignment Solution Code: index.html

Open Visual Studio Code on your PC (code .), create index.html, paste this complete step-by-step verified code, test in your browser, and push to your GitHub repo:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>BCA Day 42 - Canvas Flag & Badge</title>
  <style>
    body { font-family: "Segoe UI", sans-serif; background: #060c18; color: #fff; text-align: center; padding: 24px; }
    canvas { background: #0c1328; border: 2px solid #1e293b; border-radius: 12px; margin-top: 16px; }
    .btn { padding: 10px 20px; background: #2563eb; color: #fff; border: none; border-radius: 6px; font-weight: bold; cursor: pointer; margin: 6px; }
  </style>
</head>
<body>
  <h2>🎓 BCA Academic Badge Painter</h2>
  <div>
    <button class="btn" id="drawBtn">🎨 Draw Badge</button>
    <button class="btn" style="background:#dc2626;" id="clearBtn">🗑️ Clear Canvas</button>
  </div>
  <canvas id="badgeCanvas" width="600" height="360"></canvas>

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

    function drawBadge() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);

      ctx.fillStyle = "#0f172a";
      ctx.fillRect(40, 20, 520, 320);
      ctx.strokeStyle = "#38bdf8";
      ctx.lineWidth = 2;
      ctx.strokeRect(40, 20, 520, 320);

      ctx.beginPath();
      ctx.arc(300, 160, 70, 0, Math.PI * 2);
      ctx.fillStyle = "#1e293b";
      ctx.fill();
      ctx.strokeStyle = "#c1a648";
      ctx.lineWidth = 4;
      ctx.stroke();

      ctx.beginPath();
      ctx.arc(300, 160, 55, 0, Math.PI * 2);
      ctx.fillStyle = "#04AA6D";
      ctx.fill();

      ctx.fillStyle = "#ffffff";
      ctx.font = "bold 20px Segoe UI";
      ctx.textAlign = "center";
      ctx.fillText("IGNOU BCA ACADEMY", 300, 166);
    }

    document.getElementById("drawBtn").addEventListener("click", drawBadge);
    document.getElementById("clearBtn").addEventListener("click", () => {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
    });

    drawBadge();
  </script>
</body>
</html>
Verified Assignment Code Solution (100% Tested & Ready to Run)

🎓4. Viva Check: Mandatory Conceptual Test

What happens to canvas content if you dynamically change canvas.width or canvas.height via JavaScript (e.g. canvas.width = 800)?

5. Mandatory Step: Push to GitHub to Unlock Next Lesson

Target Repo: html-css-projects

Windows 11 Terminal / VS Code
1$
mkdir day-42
Create a new project folder (day-42)
2$
cd day-42
Change working directory to day-42
3$
git checkout -b feature/day-42-canvas-2d
4$
git add index.html
5$
git commit -m "feat(day-42): implement 2d html5 canvas geometric primitives, paths, and clearRect"
Commit staged changes with a descriptive message
6$
git push origin feature/day-42-canvas-2d
Push local commits directly to your remote GitHub repository
⌨️ Paste into terminal:Ctrl + V✨ Word wrap active (no horizontal cutoff)
Completion Prerequisites VerificationIncomplete Steps
Google Login
✔ Required
VS Code Implementation
Step 4 Viva Check
Own GitHub Project
Required

Exact GitHub Setup Guide & Expected Structure

Day 42 Requirements

Follow these exact folder and file names to prevent verification errors.

1. GitHub Repository
html-css-projects
Must be set to Public
2. Exact FolderNEW
day-42/ or bca-day-42/
Create inside repo root
3. Exact File NameREQUIRED
index.html
⚠️ No spaces or custom names
4. What to Submit Below
https://github.com/YOU/html-css-projects
Or direct link to index.html
Terminal Commands to Create & Push Day 42
1$
# 1. Enter your repository directory
2$
cd html-css-projects
Change working directory to html-css-projects
3$
# 2. Create the exact folder for Day 42
4$
mkdir day-42
Create a new project folder (day-42)
5$
cd day-42
Change working directory to day-42
6$
# 3. Create your code file: index.html
7$
# (Write your Day 42 homework code inside index.html)
8$
# 4. Save, stage, commit and push to GitHub:
9$
git add .
Stage all modified files and new assets for commit
10$
git commit -m "Day 42: HTML5 2D Canvas API Fundamentals (Coordinates, Shapes & Paths)"
Commit staged changes with a descriptive message
11$
git push origin main
Push local commits directly to your remote GitHub repository
⌨️ Paste into terminal:Ctrl + V✨ Word wrap active (no horizontal cutoff)
How to Avoid "Could not find your practical code file" Errors:
1.Use Lowercase index.html: Avoid spaces or custom names like Alan Turing..html or Index.HTML. Linux/GitHub servers are strictly case-sensitive.
2.Separate Day Folders: Create a new folder day-42/ for today so you don't overwrite previous days.
3.Ensure Public Visibility: If your GitHub repo is Private, automated validation cannot inspect your code. Set it to Public.
4.Check on GitHub Website: Before clicking "Verify", open your repo in Google Chrome to confirm your files were pushed to branch main.
📁 github.com/YOUR_USERNAME/html-css-projects
Branch: main
README.md# BCA Practical Portfolio overview
day-01/Day 1 Prior Lesson
└──index.html
day-02/Day 2 Prior Lesson
└──index.html
day-03/Day 3 Prior Lesson
└──index.html
day-04/Day 4 Prior Lesson
└──index.html
day-05/Day 5 Prior Lesson
└──index.html
day-06/Day 6 Prior Lesson
└──index.html
day-07/Day 7 Prior Lesson
└──index.html
day-08/Day 8 Prior Lesson
└──index.html
day-09/Day 9 Prior Lesson
└──index.html
day-10/Day 10 Prior Lesson
└──index.html
└──styles.css
day-11/Day 11 Prior Lesson
└──index.html
day-12/Day 12 Prior Lesson
└──index.html
day-13/Day 13 Prior Lesson
└──index.html
day-14/Day 14 Prior Lesson
└──index.html
day-15/Day 15 Prior Lesson
└──index.html
day-16/Day 16 Prior Lesson
└──index.html
day-17/Day 17 Prior Lesson
└──index.html
day-18/Day 18 Prior Lesson
└──index.html
day-19/Day 19 Prior Lesson
└──index.html
day-20/Day 20 Prior Lesson
└──index.html
└──styles.css
day-21/Day 21 Prior Lesson
└──index.html
day-22/Day 22 Prior Lesson
└──index.html
day-23/Day 23 Prior Lesson
└──index.html
day-24/Day 24 Prior Lesson
└──index.html
day-25/Day 25 Prior Lesson
└──index.html
day-26/Day 26 Prior Lesson
└──index.html
day-27/Day 27 Prior Lesson
└──index.html
day-28/Day 28 Prior Lesson
└──index.html
day-29/Day 29 Prior Lesson
└──index.html
day-30/Day 30 Prior Lesson
└──index.html
└──styles.css
day-31/Day 31 Prior Lesson
└──index.html
day-32/Day 32 Prior Lesson
└──index.html
day-33/Day 33 Prior Lesson
└──index.html
day-34/Day 34 Prior Lesson
└──index.html
day-35/Day 35 Prior Lesson
└──index.html
day-36/Day 36 Prior Lesson
└──index.html
day-37/Day 37 Prior Lesson
└──index.html
day-38/Day 38 Prior Lesson
└──index.html
day-39/Day 39 Prior Lesson
└──index.html
day-40/Day 40 Prior Lesson
└──index.html
day-41/Day 41 Prior Lesson
└──index.html
day-42/✨ CREATE THIS FOLDER FOR TODAY (Day 42)
└──index.htmlMust contain:
Sequential Progression Enforced

You are welcome to read all notes, inspect code snippets, and practice all exercises of Day 42 freely! To officially submit your GitHub repository and unlock subsequent days in your portfolio, please complete Day 41: Modular JavaScript Architecture (ES6 Modules, Import & Export) first.

Complete Day 41 First
Day 41: Modular JavaScript Architecture (ES6 Modules, Import & Export)
WhatsApp
Curriculum & Practical Systems Authored by Er. Manoj Kumar
NextSem Academy • BCA Practical Learning Portal