HTML 5: Canvas as a place to play - Building games based on Silverlight and Expressions - Site Home

I keep trying to write this post but just can’t get a solid start. So stick with me, no matter what, I am posting something.

HTML 5 only supports one kind of shape: rectangle. To draw other shapes you need to use paths like an arc.

Let’s draw a rectangle and a circle on a canvas, a very simple JavaScript function:

Code Snippet
 <!DOCTYPE html> 
<html>
<head>
   <title>Sq round</title>
   <script type="text/javascript">
       window.onload = function () 
       {
           var canvas = document.getElementById('canvas');
           var context = canvas.getContext("2d");
 
          
 
           //Draw a circle using arc paths
            context.arc(100, 100, 50, 0, 3 * Math.PI, false);
           context.fillStyle = 'Green';
           context.fill();   
           
            //Draw a rectangle, which is the only shape supported by HTML5
            context.fillStyle = 'Black';
           context.fillRect(0, 0, 100, 100);
       };
   </script>
</head>
<body>
   <canvas id="canvas" width="400" height="200"></canvas>
</body>
</html>
 

This is a very simple example, when the page loads the function runs, normally you would have the javascript function placed somewhere else in the page.

The image in this blog is what you can see. You might want to try changing the circle with the rectangle and see what happens.

Also a word of caution, a number of tutorials, especially those on the mozillia pages have code that simply detects that IE 9 is running and throw up an alert to switch to safari or Firefox, as you can see IE 9 supports HTML 5 quite nicely. Not saying that the tutorials out there are trying to make IE 9 look back, but I am not sure why they throw up the alert.

If you move the circle ahead of the rectangle it will be drawn on top of the rectangle.