After several weeks of running Hadoop, luckily pre-installed in virtual machines, I assured myself that some fun activities were in order. And picked HTML5.

If you want a great structured introduction, try the free self-paced courses offered by edx (https://www.edx.org/course/html5-part-1-html5-coding-essentials-w3cx-html5-1x-1). Alternatively, open a text editor and fire up the debugging and testing environment commonly called “web browser”, and code some.
Having diligently worked my way through Part 1 of the series, I became a bit greedy and wanted to see how layering two canvases works. So, a bit lazy, I made javascript draw some basic shapes (lines and circles), added some text and a second canvas on top of the first one to draw some more. At some point, the initially haphazard mixing of text and shapes became a page that makes short messages unfriendly for optical character recognition. It lives at http://www.unchartedcharters.com/MessageBlur.html. Using it is largely self-explanatory with instructions as default text in the text area at the top. Here is what it looks like:

The fun part hides behind the button “Peel” on the far right. If you make a text with lines/circles like the one shown and then click “Peel”, the javascript separates, or ‘peels off’, some of the image. Click on “Download image” to save the first layer. You notice how the remainder of the canvas has stuff missing:

Once you have saved the first image, immediately click “Download image” again, and save the second file. The canvas becomes blank to indicate you have saved both “peels”. The second peel contains the missing bits of the above image:

To put them back together again, use “Browse” to upload one of the two files, then use “Browse” again to add the second one. The order does not matter.

If I ever make it through all five parts of the course, maybe I’ll do something fancy – or maybe not. In the meantime, look around on the web, where you find amazing work with the HTML5 canvas, for example here:

 

Leave a Reply

Your email address will not be published. Required fields are marked *