Messing with Canvas

Just trying to learn some canvas techniques.

by vaiism

HTML

<script type="text/javascript">
        // For animating sequences, use the 'requestAnimationFrame' to enable
        // browser optimizations. If not available, tie to timeout.
        window.requestAnimFrame = (function(callback) {
            return window.requestAnimationFrame ||
                window.webkitRequestAnimationFrame ||
                window.mozRequestAnimationFrame ||
                window.oRequestAnimationFrame ||
                window.msRequestAnimationFrame ||
                function(callback){
                    window.setTimeout(callback, 1000 / 60);
                };
        })();
    
        // When the window is done loading the document, setup what we need.
        // Grab the canvas object, and the context in which we will add to it.
        window.onload = function() {
            var canvas = document.getElementById("canvasOne");
            var context = canvas.getContext("2d");
            
            
            drawBlueLine(canvas, context);
            drawZigZag(canvas, context);
            drawCircle(canvas, context);
            
            // clearCanvas(context, canvas);
        }
        
                /**
         * Draw a blue line.
         */
        function drawBlueLine(canvas, context) {
            // Draw a blue line.
            context.beginPath();
            context.lineWidth = 5;
            context.strokeStyle = "blue";
            context.moveTo(50, canvas.height - 50);
            context.lineTo(canvas.width - 50, 50);
            context.stroke();
        }
        
        function drawZigZag(canvas, context) {
            var startX = 35;
            var startY = 50;
            var zigZagSpacing = 30;
            
            context.beginPath();
            context.lineWidth = 1;
            context.strokeStyle = "#ff0000";
            context.moveTo(startX, startY);
            
            
            // Draw the lines.
            for (var n = 0; n < 7; n++) {
                var x =...