getElementById and getContext: Canvas - Course HTML 5 - an introduction of the new web language - Lesson 2 | web Developer courses

Duration:  18 minutes

Summary: In this video, we continue our discussion of canvas. We added the canvas tag to our page and retrieved the canvas object using getElementById() and the context using getContext. To draw lines on the canvas, we started with the method beginPath() and committed the drawing using stroke(). The code in between these methods did the actual work like moveTo() and lineTo(). After we finished our drawing, we looked at another approach of doing a translation. We saved the current context at the beginning, we translated to the center of the canvas (150,100), we did the drawing as usual, and finally, we restored the context we saved so that our later drawings will not be affected by the translation.

Technology Used: HTML 5 - Introduction