Tag Archives: JavaScript

A quick introduction to the HTML5 Canvas

The next article in the Developing with HTML5 series. Better late than never, but much has happened. Perhaps more on that someday…

A painter paints his pictures on canvas. But musicians paint their pictures on silence. We provide the music, and you provide the silence.

—Leopold Stokowski

HTML5’s canvas element allows us to create and display images on-the-fly using JavaScript. Canvas graphics can often yield speedy performance, particularly on mobile devices and desktops that feature browsers with hardware acceleration enabled. While SVG (which I covered earlier) does feature a convenient model for markup and CSS access to the graphic in question, Canvas can usually do a better job at performance thanks to hardware acceleration and not having to traverse the DOM.

Let’s analyze a basic canvas. Start with a new HTML5 document containing a canvas element in the body:

Save your file. Not much will happen yet, unless you have web browser that doesn’t support canvas. Modern browsers will probably yield a blank white page for the above code. An older non-supporting browser, a text-only browser such as Lynx, or a screen reader will deliver the default text:

Lynx renders default text for canvas

You can draw on the canvas using JavaScript. Place this code above the closing element to try it out:

Now when we preview our page in a supporting browser, we should see a green box:

Green canvas box

To explain what we did with this JavaScript: We wrote a function called draw(), which first uses the d ocument.getElementById() method to grab our #example canvas element. The next line sets the rendering context with canvas.getContext(). We then use the fillStyle() method to assign a CSS color value and the fillRect() method to draw the box.

The prototype for fillRect() is fillRect(x, y, width, height). The x and y values position the box relative to the bounds of the canvas, and the
box is drawn from there using width and height.

Now let’s try a circle. (And throw in some alpha transparency for good measure.) Add five more lines to our ctx variable as shown:

The result should be an overlapping circle

Progress of canvas showing circle overlapping rectangle

Here, we’ve used the fillStyle() element to define a light violet color for our circle. You’ll notice that this time we are passing in one extra number to fillStyle(). That extra number is a parameter that sets the alpha transparency—any decimal value from 0 to 1 is valid, with 0 being fully transparent and 1 being fully opaque.

In this case, our value of 0.5 might be thought of as a 50% transparency. We see the true violet color of our circle along the right edge where it hangs off of our green square, and we see a blend of the two colors (which happens to be a neutral gray) where the two shapes overlap.

Because we want to create a circle instead of a square in this example, we need to use the beginPath() and closePath() methods to draw a linear shape. We use the arc() method for defining the path itself. The first two values in the arc() arguments are x and y coordinates within the canvas. Third is the arc radius, which here is set to 75 pixels. The last two values are the start angle and end angle. We can specify a calculation for these angles, so here we set our end angle by leveraging JavaScript’s built-in Math object to multiply pi by 2.

Now let’s add a regular jpeg image to our canvas after our circle (below the last ctx.fill() line):

piano keys closeupThis adds our piano image (shown here—please feel free to download for use with this tutorial) to the canvas. Above, we begin by initializing a new instance of the Image object. The src property specifies the path to our image (which may be relative or absolute). Next, the onload property tells the canvas to execute the drawImage() method, specifying our piano image as the source and x and y coordinates of 30 pixels each.

But why is that special? After all, we could have just inserted an <img> tag there, right? Yeah, but since this is JavaScript, we can clone it. Here’s how to add another instance of the image using different parameters:

We’ve resized our cloned image, too. (It’s now 70 pixels square.) And now we can apply effects to it. How about trying a little drop shadow?

Here’s our finished masterpiece:

A rectangle, circle and two copies of a piano keyboard image composed onto the HTML5 canvas

And that is what modern art is all about. Here’s our final code example:

This is just the tip of the iceberg—but it should be enough to show how to get a basic canvas working in HTML5.

The canvas element is fairly well supported on modern versions of most web browsers, including Firefox, Safari, Chrome, and Opera. This goes as well for their mobile equivalents, with the exception that the Text API for canvas has spotty support for Opera Mini.

Internet Explorer 9 even includes support for the canvas element. For older versions of IE, add Explorercanvas as a source to your web page and you’ll achieve pretty good compatibility out of the box. You can check current browser support for canvas features on caniuse.com

Foundation Website Creation with CSS, XHTML, and JavaScript

In a real bookstore

I would have announced this earlier, but somehow with the trip to Taiwan, the subsequent jet lag, and the whopper of a cold I had this past week has delayed me from getting this post out until now. But here it is: My book titled “Foundation Website Creation with CSS, XHTML, and JavaScript” is now out! I saw two copies of it today on the shelf at Barnes & Noble in Walnut Creek earlier today (pictured).

This project came up at a real interesting time. I was just starting the final quarter of my masters degree program through University of Denver in computer information systems, and the last thing I wanted to do was to take on extra work. But of course, this opportunity to collaborate on this project was too good to pass up, so I opted for no sleep for a few months and somehow got both done last June. Man, it feels good to be done.

My fellow authors Jonathan Lane and Meitar Moscovitz and I have put together a book that covers a professional introduction to the core technologies involved in front-end website development. In it we have tried to convey modern best practices from a web standards perspective as well as from a user-centric project management perspective to give the emerging web developer a solid foundation as to what to expect in a professional web design workflow. I hope the readers of this book find the information contained therein to be valuable platforms for further exploration and learning.

The book may be ordered from Amazon, and you might even find it on a local bookstore shelf!

iPhone and mouse events

PPK has written his impressions regarding his shiny brand-new Jesusphone. (I wonder did he get black or white?)

In his post, he tells us the initial reports for the behavior of mobile Safari with regards to things like documentation (missing), mouse event implications (game changing), and how the disjunct state of finger tapping and dragging compares with the continuous state of the traditional OS desktop mouse pointer. In particular, he points out the fact that the assumed ever-present mouse pointer (the little cock-eyed arrow which points black and to the upper left on Mac, and is white and points to the upper right on Windows) can no longer be counted on. And in fact, there is no icon any more. Your fingertip is it, my friend!

With the coming of the iPhone the mouse model has lost its inescapable logic. Mousemove, mouseover and mouseout (and even poor old :hover) have been downgraded to device-specific events that may not survive in the long run.

May not survive… hmmm, interesting impact. I think he could be right here.

But — and here lies the problem — these events are used in countless web sites and applications for a variety of purposes, and Apple simply cannot afford these sites not working on the iPhone.

Interestingly, so far Apple has found that it indeed can afford to dispense with Flash and Java on the iPhone platform, and while most complain that the checkbox isn’t complete, some argue that Apple is doing just fine and won’t be in any hurry anytime soon. Certainly demand for these babies has been extremely high so far. I would be interested to see how many of such sites absolutely depend on such functionality to work, and how many of those either change their site behaviors or create iPhone-friendly web presences as the demand for the mobile web increases. Wondering… but at the very least, things like these aforementioned mouse events – Flash, Java, and the like – are not yet queued up on Apple’s priority list, or else they chose to take the less-is-better approach. It is an interesting question: How much of the specifications do browser vendors adhere to on such a limited platform such as mobile devices? What is practical? What is feasible?