Last week I finished the little course HTML5 Canvas - From Pixels to Animation on Udacity. While the technical details were not really new to me, as I have used the canvas before, it was a good refresher on the use of graphics and videos on the canvas without using any libraries.
The course is not very long, only two lessons, each having roughly the same size as weekly lessons in paced moocs, but this is, as all Udacity courses are, a self-paced course, so it is perfectly fine to work through all the material in more then one week per lesson or even go through it all in one long learning session.
In contrast to some older Udacity courses this course does not work towards one final project, building it up from the beginning of the course until it is finished at the end, but instead there are some smaller projects along the way. I think this is beneficial to make the course accessable for different learners: Having one project to work on from the beginning until the end is nice for people who have the time to go through the course in one go or at least in the time it would take someone taking a similar course on a weekly lesson basis. It helps them learn to build complex systems and not only small examples, but it also gets a lot more difficult if there is some time between the lessons, because the learner has something else to do. I have actually given up on more than one course like this, because study breaks caused by other daily life responsibilities led to me spending more time on trying to get into the projects again then on the actual content of these courses.
This course instead has two smaller projects, one for each lesson:
The first lesson shows the basics of working with the canvas element, how to set up a webserver to locally run the code (some of the topics require either a local server or a https connection and will not run when you just open the html-file in your browser), how to draw and how to load assets. The final project of this is a Meme-Maker that combines images with text.
The second lesson dives into the topic of the pixel array, that is part of the ImageData object, working with video data and animation, providing all the necessary building blocks of programming a game. During the lesson the examples move around the topic of image and video manipulation, like these two sketches:
In general I would say this is a nice basic course that covers a lot of the possibilities of the HTML5 canvas in a short time. To go deeper into any of the shown directions, for example game programming, a lot more material will be needed, but after this course one will be able to have an idea how to go on about that.