Embedded Files
Suggested topics
Suggested topics
Drawing images is a bit tricky for JavaScript newcomers as it involves loading them asynchronously before drawing. Do you have any further questions about this?
Did you know we can also draw images from the Webcam? If we start from the Module 2 examples which use the getUserMedia API, it is possible to take screenshots of a person in front of the Webcam. Use the video that plays the Webcam stream as the first parameter of drawImage(...). This is useful for registering forms, for example.
Optional projects
Optional projects
Here are a few project ideas. Your classmates and the team who prepared the course will be glad to try them and offer feedback. Please post URLs in this discussion forum. These projects are optional, meaning that they won't be graded. However, it is important to complete them to ensure good understanding of the material.
Project 1 (easy): Make a funny application by mixing all the things seen so far: images, colors, texts, video...
Project 2: Write a small application triggering a screenshot from the Webcam.
Project 3 (a bit harder, need to know how to use CSS positioning and the CSS z-index property): Try to position a canvas on top of a video element and draw shapes on top of the video.
Project 4 (follow-up of project 3): Play two videos in loop mode at the same time, and draw the current image of the video 2 in the canvas on top of video 1, in a smaller size.
Other example:
Page updated
Google Sites
Report abuse