Week 8: Canvas Drawing & Animation

To Do This Week:

Midterm Grades are Due Wednesday at 5pm. All late projects must be submitted by Wednesday at 12pm.

SVG (Scalable Vector Graphics)

Best used on a web page when you want crisp, scalable graphics that remain sharp at any size and can be easily interacted with using JavaScript.
SVG is made of vector shapes (lines, paths, circles, text), each part of the graphic exists as an individual element in the HTML.
Select pieces with JavaScript or CSS and change their color, size, position, or trigger small animations like hover effects, fades, rotations, or simple movements.
Ideal for logos, icons, diagrams, infographics, maps, and illustrations where interaction is light but precise.
Create artwork in Adobe Illustrator, then export it as an SVG file (File → Export → Export As → SVG). The exported SVG can either be linked as an image or pasted directly into the HTML markup, allowing you to target individual shapes with JavaScript for interactivity.

Used when you need continuous drawing, frequent updates, or more complex animation.
A blank drawing surface that JavaScript paints onto using coordinates—like a digital sketchpad.
Once something is drawn, it doesn’t remain as a separate object in the DOM; it becomes pixels.
Faster and better suited for dynamic visuals such as particle systems, physics simulations, generative art, data visualizations that update constantly, and especially games.
Canvas animation is like >drawing frame-by-frame on a bitmap surface. For animation loops, motion, and interactive game logic, Canvas is typically the better choice.

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.