Week 10: Canvas Drawing/Animation

To Do This Week:

Work on Map Projects. Due Wednesday Oct 24th

Module Notes

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 by 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

Canvas Project: 5% (Due Oct 29)

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().