Canvas Tag in Blogger Posts

This example requires a browser that supports the
HTML5
<canvas> feature.


This post looks at the possibility of embedding a Canvas element within a Blogger post.

Canvas consists of a drawable region defined in HTML code with height and width attributes. JavaScript code may access the area through a full set of drawing functions similar to other common 2D APIs, thus allowing for dynamically generated graphics. Some anticipated uses of canvas include building graphs, animations, games, and image composition.

As the above image demonstrates, Blogger is happy with canvas elements.

The code looks like this:

<canvas id="myCanvas"></myCanvas>

<script type="text/javascript">

var canvas=document.getElementById('myCanvas');
var ctx=canvas.getContext('2d');

ctx.fillStyle='#FF0000';
ctx.fillRect(0, 0, 100, 100);

ctx.fillStyle = 'rgba(0, 0, 200, 0.5)';
ctx.fillRect (80, 80, 180, 180);

</script>