HTML5 canvas in a blogger.com page

I have been doing html5 for basic canvas graphics tests before building native code. With HTML5 we can build highly customized contents on a webpage. Example we can build a slideshow or some texts which cannot be copied. We can even build small apps on one blogpost. Below is a very simple example of adding html5 canvas on a blogger.com post.


Start with a new post on blogger.com and go to html edit mode. Its next to compose button. In html add the code mentioned below in post. The script which handles canvas resides in the canvas tag for easier management. After putting the code get back to compose mode and preview the page. The preview page will show the output as seen in this page.


Once happy publish it!. However there are limitations to this. Blogger.com posts don't give access to top level tag on html. As per the layout and template it offers editing in div tag in body. If we don't need exclusive access to screen and other similar things canvas inside blogger can do many multimedia work.

Copy the below script and add to your post in HTML edit mode.

Script:

<canvas height="200" id="canvas1" width="200">
Your browser does not supports canvas.

<script>
var canvas1 = document.getElementById("canvas1");
var context1 = canvas1.getContext("2d");
context1.fillRect(0, 0, 200, 200);
function loop() {
    context1.fillStyle = 'hsl(' + 360 * Math.random() + ', 50%, 50%)';
    context1.fillText("HTML5 Text!", 50, 50);
    // call loop again after 1000/5 milliseconds
    setTimeout( loop, 1000/6 );
}
loop();
</script>
</canvas>


Output of above script:

Your browser does not supports canvas.