The sketchpad project started life a few years ago as an Adobe Flash app. Recently, Bob wanted to show that HTML5 canvas could be used to create interactive applications that are every bit as dynamic as those that previously have been created with Flash. So, he set about recreating the sketchpad as an HTML5 canvas project.
Using a combination of HTML5, CSS, JavaScript, jQuery, and JSON to re-create the exact functionality from the previous Flash project, and, by first detecting whether or not the user's browser is canvas-capable, the sketchpad seamlessly displays a version (HTML5 or Flash) that the user is able to view, providing coverage for the greatest number of viewers, from those with modern browsers (especially those not able to view Flash, such as tablets and phones), to users stuck with older browsers incapable of rendering HTML5 canvas.
The sketchpad allows users to page through a variety of images using the next or back arrows, or hyperlinks contained within a list of image captions on the page below the sketchpad. Each time a new image request is made, the previous image fades away, the new image is loaded, and the sketchpad stretches or contracts to fit the size of the image. Additionally, the sketchpad automatically rotates its orientation — changing to landscape or portrait — to best fit the image. Hovering over, or tapping, Show Caption reveals information about the sketch that has been pulled from the JSON data file.
The sketchpad animations (fading, rotating, stretching, and contracting) are accomplished by drawing onto the context of the canvas using a sprite sheet containing the various parts of the sketchpad.