⇦ Back

WDX-180

Web Development X

Week 26 | Advanced JavaScript

Week 25 ⇦

Updated: 21/4/2025

⇨ Week 27

Week 26 - Day 1 | Canvas API

Schedule

  • Watch the lectures
  • Study the suggested material
  • Practice on the topics and share your questions

Study Plan

Your instructor will share the video lectures with you. Here are the topics covered:

  • Canvas API

You can find the lecture code here

Lecture Notes & Questions:

References & Resources:

Exercises

  • Draw the Jamaica flag
  • Draw a Pacman figure
  • Combine Media API + Canvas API to track video progress/playtime

IMPORTANT: Make sure to complete all the tasks found in the daily Progress Sheet and update the sheet accordingly. Once you’ve updated the sheet, don’t forget to commit and push. The progress draft sheet for this day is: /user/week26/progress/progress.draft.w26.d01.csv

You should NEVER update the draft sheets directly, but rather work on a copy of them according to the instructions found here.

Extra Resources

Photo by Kelli Tungay

Week 26 - Day 2 | Canvas API Exploration

Schedule

  • Study the suggested material
  • Practice on the topics and share your questions

Study Plan

  • Today is Canvas API exploration day. Make sure to work on the tasks and challenges that we came up with yesterday and explore new ways to use the Canvas API. Here’s a repo with lots of cool resources and demos: Awesome Canvas

  • Some highlights:

Have fun and share your experience (bugs and frustrations included)!

npm install virus

npm now hosts more than 2.4 million packages! So many npm packages, so many things to worry about! Here are a couple of ways to check the integrity, safety and reliability for npm packages, both for Node and JavaScript:

  • 1) Install npq and run checks before installing: npq install react

  • 2) Check for the health of an npm package in here. Example

  • 3) Install snyk and run some tests using snyk test

Week 26 - Day 3 | Canvas API: Part 2

Schedule

  • Watch the lectures
  • Study the suggested material
  • Practice on the topics and share your questions

Study Plan

Your instructor will share the video lectures with you. Here are the topics covered:

  • Canvas API: Part 2

You can find the lecture code here and other resources (diagrams, etc.) here.

Questions

  • Can we name elements of a drawing and then manipulate them?
    • Unfortunately we do not have a built in solution for this one. (Let us know if you find out about something that exists)
    • This is a good case for a group challenge
  • What gets saved when we use the canvas state() method?

References & Resources:

Exercises

  • Draw the Jamaican flag and a Pac-man figure using Canvas API!
  • Let’s learn about how Canvas pixels actually behave on different screen sizes and especially when the screen compresses/squeezes the canvas
  • Build an API that allows us to select and manipulate canvas elements
  • Draw a chessboard using Canvas and loops
  • Explore Canvas Transformations
  • Combine requestAnimationFrame with events (e.g. arrow button presses)

IMPORTANT: Make sure to complete all the tasks found in the daily Progress Sheet and update the sheet accordingly. Once you’ve updated the sheet, don’t forget to commit and push. The progress draft sheet for this day is: /user/week26/progress/progress.draft.w26.d03.csv

You should NEVER update the draft sheets directly, but rather work on a copy of them according to the instructions found here.

Week 26 - Day 4 | Practice Day

Schedule

  • Study the suggested material
  • Practice on the topics and share your questions

Study Plan

You should dedicate this day to do a recap on the material we’ve covered so far and practice by applying all the concepts that you’ve learned and completing all the exercises and coding challenges that are left unfinished.

Good luck!

Week 26 - Day 5 | Canvas, SVG & ImageData

Schedule

  • Watch the lectures
  • Study the suggested material
  • Practice on the topics and share your questions

Study Plan

Your instructor will share the video lectures with you. Here are the topics covered:

  • Part 1: SVG
  • Part 2: Canvas API & ImageData

You can find the lecture code along with the SVG files here

Lecture Notes & Questions:

References & Resources:

Weekly feedback: Hey, it’s really important for us to know how your experience with the course has been so far, so don’t forget to fill in and submit your mandatory feedback form before the day ends. Thanks you!

Project maintained by in-tech-gration Hosted on GitHub Pages — Theme by mattgraham