Inspired? So now you need to understand how it all works. Take a moment to watch the video below in which one coder creates a Basic Canvas Animation using <canvas> before we move on to the rest of the lesson.Basic Canvas Animation
Lines are the basic element of any design and you can actually do a lot with them. Just take a look at this HTML5 rendering of a Piet Mondrian! If you’ve ever used a drawing program you know that when you want to create an image you have to make a few choices like dimensions and the width and color of the stroke, right? Well the HTML5 canvas works in much the same way but instead of making these selections by clicking buttons in a toolbar, you call them out and set their properties in code. And instead of using your mouse to draw, you specify beginning and end points for each line.
To start, check out HTML Canvas Tutorials and work through the first five HTML5 Tutorials Sections 1.1 HTML5 Canvas and 1.2 Lines (up to Line Cap)HTML5 Tutorials Sections 1.1 & 1.2
If you are feeling like you really want to understand what’s going on behind the scenes, you should read the Mozilla Developer Network pages on Canvas Canvas Tutorial series. Try the first two to start:MDN: Canvas - Basic Usage MDN: Canvas - Shapes
To see even more HTML Canvas action, watch this video where a developer uses Canvas to create lines, much like you are about to in your challenge!HTML5 Canvas Lesson2: Lines