WEEK 10: Canvas Drawing/Animation
(March 17 & 19)

To Do This Week:

Work on Map Projects. Due Wednesday March 19th

---

Module Notes

Elit project student list

 

Storing Stuff:

• Variables
• Arrays
• Objects / Methods / Properties:
  • Object Literals
  • Object Constructors
• Classes

variables are objects

let str = "Hello, World!";
str.length; // Output: 13 (length property)
str.toUpperCase(); // Output: "HELLO, WORLD!" (method)

js date object 

Date() Demo

const now = new Date();
console.log(now.toDateString()); // Output: "Sun Mar 16 2025"

 

Object Literals

let car = {
  make: "Toyota",
  year: 2022,
  getMessage: function () {
    return `This car is a ${this.year} ${this.make}.`;
  }
};

// Changing property values
car.make = "Honda"; 
car.year = 2025; 

console.log(car.getMessage()); // Output: This car is a 2025 Honda.

Object Constructors

function Car(make, year) {
  this.make = make;
  this.year = year;
}

// Creating an instance
const myCar = new Car("Toyota", 2022);

// Changing property values
myCar.make = "Honda";
myCar.year = 2025;

console.log(myCar.make); // Output: Honda
console.log(myCar.year); // Output: 2025

Classes

class Car {
  constructor(make, year) {
    this.make = make;
    this.year = year;
  }

  getMessage() {
    return `This car is a ${this.year} ${this.make}.`;
  }
}

const myCar = new Car("Toyota", 2022);
// Changing property values
myCar.make = "Honda";
myCar.year = 2025;


console.log(myCar.getMessage()); // Output: This car is a 2025 Honda.

Class Inheritance

// Subclass that extends Car
class Ev extends Car {
  constructor(make, year, batteryRange) {
    super(make, year); // Call the parent constructor
    this.batteryRange = batteryRange; // New property for Ev
  }

  getBatteryInfo() {
    return `The ${this.year} ${this.make} has a battery range of ${this.batteryRange} miles.`;
  }
}

// Creating an instance of Ev
const myEv = new Ev("Honda Prologue", 2025, 300);

// Using methods from both Car and Ev
console.log(myEv.getMessage()); 
// Output: This car is a 2025 Honda Prologue.

console.log(myEv.getBatteryInfo()); 
// Output: The 2025 Honda Prologue has a battery range of 300 miles.

---

Maps Q & A

Map Projects List

---

Workshop Canvas

Intro to Canvas:

• Canvas Element: Introduction to JavaScript Drawing and Animation
• Canvas Reference
• beginPath() – Begins a new path or resets the current path.
• moveTo(x, y) – Moves the “pen” to a specific starting position without drawing anything.
• lineTo(x, y) – Draws a straight line from the current position to the given coordinates.
• ctx.arc(x, y, radius, startAngle, endAngle, counterclockwise) – Draws a circle or arc.
• rect(x, y, width, height) – Draws a rectangle.
• fill() – Fills the current shape with the active fill style (color, gradient, etc.).
• stroke() – Outlines the current path with the active stroke style.
• closePath() – Connects the last point to the first, closing the shape.
• Adding text
  ctx.font = "30px Arial";
ctx.fillText("Hello, Canvas!", 50, 200);
  ctx.fillText(text, x, y, [maxWidth]) – maxWidth scales box to fit text.
• Use ctx.save() and ctx.restore() to reset settings and avoid affecting future drawings.

Drawing Circles and Arcs:

ctx.arc(x, y, radius, startAngle, endAngle, counterclockwise);
x, y: The center of the arc
radius: The distance from the center to the edge
startAngle: Where the arc begins (in radians)
endAngle: Where the arc ends (in radians)
counterclockwise (optional): true (clockwise if default!)

Create a Drawing/Animation with Canvas:

JavaScript Canvas Drawing Demo

In-Class Activity: Change the JavaScript to create your own face animation. Examples:

• Example Face 1
• Example Face 2

Canvas Clock Example

Student Pairings

---

Canvas Project: 5%
(Due March 26)

For this project, you will use the HTML5 <canvas> element and JavaScript to create a digital drawing. Your artwork can be static or animated. The goal is to experiment with the canvas rendering API  to draw 2D shapes, lines, and colors, and optionally add movement.

You are welcome to use AI tools for guidance, but you should actively modify and experiment with the code to create something unique. Try adjusting colors, shapes, positions, and animations until you get the effect you want. The goal in this mini-project is to get comfortable working with the canvas, not to create a masterpiece.

Requirements:

• Use the <canvas> element in an HTML file.
• Write JavaScript to draw at least three different shapes (e.g., circles, rectangles, lines).
• Use at least two different colors in your drawing.
• (Optional) Add animation using requestAnimationFrame().