Canvas - Programmatic Design

In this lesson, you’ll learn about the HTML5 Canvas Element, a relatively new tool, and you will use it to draw a few lines with code. The Canvas really is just that — a canvas for displaying and animating all your programmatically generated 2D shapes and images. If you’ve ever played a game on Facebook or watched a video on Hulu you have already used the canvas so now it’s time to put it to work for you!

“How can you test for support of a given JavaScript method in a user’s browser?”
sample interview question

For a little inspiration before we start try this canvas game or check out this cool animated art piece, other cool animated art piece, or have a gander at this amazing morphing curve!

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
What's next? Do the challenge!

0 Comments — Be the first!