Using Canvas

<!DOCTYPE html>
<!-- From: Wiley HTML5 for Dummies Quick Reference (2011)  -->
<html lang="en">
    <head>
        <meta charset="UTF-8"/>
        <title>Canvas example</title>
        <script language="JavaScript" type="text/javascript" >
            function draw ()
            {
                var myCanvas = document.getElementById( "myCanvas");
                var context = myCanvas.getContext( "2d");

                context.fillStyle = "blue";
                context.strokeStyle = "red";

                circle( context, 1, 1, 1 );

                for( i = 1; i <= 200; i+= 2 )
                {
                    circle( context, i, i, "blue" );
                    circle( context, 300-i, 200-i, i, "red" );
                    circle( context, 300-i, i, i, "blue" );
                    circle( context, i, 200-i, i, "red" );
                } // end for
            } // end draw

            function circle ( context, x, y, radius, color )
            {
                context.strokeStyle = color;
                context.beginPath();
                context.arc( x, y, radius, 0, Math.PI * 2, true );
                context.stroke();
            } // end circle
        </script>
    </head>
    <body>
        <br/>
        <canvas id="myCanvas"
                width="300"
                height="200">
            This example requieres HTML5 canvas support.
        </canvas>

        <button type="button"
                onclick="draw()">
                click me to see a drawing
        </button>
    </body>
</html>