I hate to admit it but I haven't looked at Canvas yet. It's not for lack of wanting but more of time. Seems like there's SO many cool things out there to learn and nailing down time is tough. So I decided to dip my toe into.

For those not familiar with it, the HTML5 Canvas element provides a rectangular area where you can draw anything you want on. It's pretty slick and seems pretty powerful. In essence, instead of solely relying on image creation tools like Photoshop, GIMP or Paint.net for generating graphics, you now have a native element on which to do it. 

If we look at the Canvas element, the format is just like any other HTML element:

[code lang="html"]
&lt;canvas id=&quot;can1&quot; width=&quot;300&quot; height=&quot;300&quot;&gt;&lt;/canvas&gt;
[/code]

You define the element along with specific attributes, just like most any other HTML element. In this case, we're assigning it an "id" along with the width and height of the rectangular drawing area. The reason we assign it an "id" is to allow us to later reference the element via JavaScript and call the methods necessary to start drawing.

Now, I'm by no means a Picasso, which is why I tend to focus more on programming than design work. I prefer to leave that to the pros with a real creative knack but I will at least attempt to create something colorful.

The first thing we need to do is great a reference to the Canvas element. Remember that I discussed adding an "id" attribute to the element? This is where it comes in handy:

[code lang="js"]
var myCanvas = document.getElementById( &quot;can1&quot; );
[/code]

You could do the same thing in jQuery this way:

[code lang="js"]
var myCanvas = $( &quot;#can1&quot; );
[/code]

but because we really don't need all of the jQuery library's syntactic sugar for this small demo, I'm just going to use plain 'ole JavaScript.

Next, we'll use the element's <em>getContext()</em> method to grab the rendering context for that element. This is the area within your Canvas element where the actual drawing will occur. It doesn't have to be the same size as your canvas but it needs to fit within it.

[code lang="js"]
var myContext = myCanvas.getContext( &quot;2d&quot; );
[/code]

We specify "2d" as a parameter because it's the only rendering context currently supported by the specification so for now, your limited to flat drawings.

Now that I have the rendering context, I can begin making my drawing. Using the <em>fillStyle</em> and <em>strokeStyle</em> properties, I can set the fill color for specific areas of my drawing and the color of the borders respectively. Then using the strokeRect() & fillRect() methods, I can use the colors defined in those properties to effect the change:

[code lang="js"]
  myContext.fillStyle   = '#00f';
  myContext.strokeStyle = '#f00';  
  myContext.lineWidth   = 4;  
  myContext.strokeRect( 0,0,300,300);
  myContext.fillRect(0, 0, 300, 300);
[/code]

<a href="http://blog.reybango.com/wp-content/uploads/2010/07/box1.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/07/box1.png" alt="" title="box1" width="304" height="304" class="alignright size-full wp-image-909" /></a>
