Lesson 3 Learning Module 1
Drawing Shapes on HTML Canvas
(Prerequisite for Pixel-Based Game Development)
Learning Objectives
At the end of this lesson, students should be able to:
1. Understand what HTML Canvas is and how it works
2. Set up a canvas element using HTML
3. Use JavaScript to draw basic shapes on the canvas
4. Control position, size, and color of shapes
5. Understand the coordinate system of canvas
6. Apply drawing concepts to pixel-based game creation
Introduction: Why Canvas?
In game development, especially pixel-based games, everything you see on the screen—characters,
walls, enemies, coins—are drawn shapes or images.
The HTML <canvas> element allows us to:
• Draw shapes
• Control every pixel
• Animate objects
• Build games without external libraries
Canvas is the playground where your game lives.
What is HTML Canvas?
Canvas is an HTML element that provides a drawing area controlled by JavaScript.
Basic Syntax
<canvas id="gameCanvas" width="400" height="300"></canvas>
Important Notes
• Canvas itself is empty
• JavaScript is required to draw inside it
• Width and height are set in pixels
Setting Up Canvas in JavaScript
Step 1: Get the Canvas Element
const canvas = [Link]("gameCanvas");
Step 2: Get the Drawing Context
const ctx = [Link]("2d");
ctx is the drawing pen you use to draw shapes.
Understanding the Canvas Coordinate System
Canvas uses a 2D grid:
• (0, 0) → top-left corner
• x increases → right
• y increases → down
Example:
[Link](50, 50, 100, 50);
Value Meaning
50 X position
50 Y position
100 Width
50 Height
Drawing Rectangles (Most Important for Pixel Games)
Pixel games mostly use rectangles.
Draw a Filled Rectangle
[Link] = "blue";
[Link](20, 20, 40, 40);
Draw an Outline Rectangle
[Link] = "red";
[Link](80, 20, 40, 40);
Game Objects as Rectangles
• Player → rectangle
• Wall → rectangle
• Enemy → rectangle
Drawing Circles (Coins, Bullets)
Basic Circle Syntax
[Link]();
[Link](x, y, radius, startAngle, endAngle);
[Link]();
Example
[Link] = "gold";
[Link]();
[Link](150, 50, 10, 0, [Link] * 2);
[Link]();
[Link] * 2 = full circle
Drawing Lines (Borders, Paths)
[Link]();
[Link](10, 100);
[Link](200, 100);
[Link] = "black";
[Link]();
Colors and Styles
Change Fill Color
[Link] = "green";
Change Line Width
[Link] = 3;
Clearing the Canvas (Very Important for Games)
In games, the screen redraws many times per second.
[Link](0, 0, [Link], [Link]);
This prevents drawing over old frames.
Mini Example: Drawing a Player Block
<canvas id="gameCanvas" width="300" height="200"></canvas>
<script>
const canvas = [Link]("gameCanvas");
const ctx = [Link]("2d");
[Link] = "blue";
[Link](50, 50, 20, 20);
</script>
This blue square represents a player in a pixel game.
Pixel-Based Thinking
In pixel games:
• Everything is small blocks
• Movements are by small increments
• Shapes are usually 10x10, 16x16, or 32x32
Example:
let playerX = 100;
let playerY = 100;
[Link](playerX, playerY, 16, 16);
Guided Practice (Class Activity)
Task 1
Draw:
• 1 blue player block
• 3 wall blocks (gray)
• 1 coin (yellow circle)
Task 2
Change:
• Position of the player
• Size of the blocks
Student Exercise
1. Create a canvas (400x300)
2. Draw:
o A player square
o A floor using rectangles
o Coins using circles
3. Use different colors
4. Clear the canvas and redraw
Common Beginner Mistakes
Forgetting to get context
Drawing without beginPath() for circles
Using CSS to resize canvas (causes blur)
Forgetting to clear canvas in games
Connection to Game Development
This lesson prepares students for:
• Character movement
• Collision detection
• Game loops
• Pixel-based animation
• Tile-based maps
If you can draw shapes, you can make a game.
Summary
• Canvas is a drawing surface
• JavaScript controls everything
• Shapes are game objects
• Coordinates control position
• Clearing canvas enables animation