Edit in JSFiddle

<canvas id='a' width="500" height="375"></canvas><br>
<button onclick='draw_b()'>Rect</button>
<button onclick='clear_a()'>Clear</button>
<button onclick='draw100b()'>10,000 Rect</button>
<button onclick='draw_grid()'>Grid</button>
<button onclick='draw_grad()'>Gradient</button>
<button onclick='draw_cat()'>Cat Img</button>


<img id="cat" src="http://diveintohtml5.info/i/openclipart.org_media_files_johnny_automatic_1360.png" alt="sleeping cat" width="177" height="113" style="display:none">

    // by Troy Whorten, Feb 24, 2014
    
    function draw_b() {
        var a_canvas = document.getElementById("a");
        var a_context = a_canvas.getContext("2d");
        rand_x = Math.random();
        rand_y = Math.random();
        xcoord = a_canvas.width * rand_x;
        ycoord = a_canvas.height * rand_y;
        a_context.fillStyle=randomColor();
        a_context.fillRect(xcoord, ycoord, 50, 25);
    }
    
    function clear_a() {
        var a_canvas = document.getElementById("a");
        var a_context = a_canvas.getContext("2d");       
        xcoord = a_canvas.width;
        ycoord = a_canvas.height;
        a_context.clearRect(0,0,xcoord,ycoord);
    }
    
    function randomColor() {
        // Source for this function from here:
        //  http://stackoverflow.com/questions/1484506/random-color-generator-in-javascript
        var letters = '0123456789ABCDEF'.split('');
        var color = '#';
        for (var i = 0; i < 6; i++ ) {
            color += letters[Math.round(Math.random() * 15)];
        }
        return color;
    }
    
    function draw100b() {
        for(var i=0; i<10000; i++)
            draw_b();
    }
    
    function draw_grid() {
        // code in this function is basically verbatim from 
        // http://diveintohtml5.info/canvas.html
        
        var a_canvas = document.getElementById("a");
        var a_context = a_canvas.getContext("2d");       
        max_x = a_canvas.width;
        max_y = a_canvas.height; 
        
        //draw the off-white grid
        for( var x = 0.5; x < max_x; x += 10)
        {
            a_context.moveTo(x, 0);
            a_context.lineTo(x, max_y);
        }
        
        for( var y = 0.5; y < max_y; y += 10)
        {
            a_context.moveTo(0, y);
            a_context.lineTo(max_x, y);
        }
        
        a_context.strokeStyle = "#eee";
        a_context.stroke();
        
        //draw the arrows
        a_context.beginPath();
        a_context.moveTo(0, 40);
        a_context.lineTo(240, 40);
        a_context.moveTo(260, 40);
        a_context.lineTo(500, 40);
        a_context.moveTo(495, 35);
        a_context.lineTo(500, 40);
        a_context.lineTo(495, 45);
        a_context.moveTo(60, 0);
        a_context.lineTo(60, 153);
        a_context.moveTo(60, 173);
        a_context.lineTo(60, 375);
        a_context.moveTo(65, 370);
        a_context.lineTo(60, 375);
        a_context.lineTo(55, 370); 
        a_context.strokeStyle = "#000";
        a_context.stroke();
        
        //draw text
        a_context.font = "bold 12px sans-serif";
        a_context.fillText("x", 248, 43);
        a_context.fillText("y", 58, 165);
        a_context.textBaseline = "top";
        a_context.fillText("( 0 , 0 )", 8, 5);
        a_context.textAlign = "right";
        a_context.textBaseline = "bottom";
        a_context.fillText("( 500 , 375 )", 492, 370);
        
        //draw corner 'dots'
        a_context.fillRect(0, 0, 3, 3);
        a_context.fillRect(497, 372, 3, 3);
        
    }

    function draw_grad() {
        var a_canvas = document.getElementById("a");
        var ctx = a_canvas.getContext("2d"); 
        var grad = ctx.createLinearGradient(0,0,a_canvas.width,0);
        grad.addColorStop(0,randomColor());
        grad.addColorStop(1,randomColor());
        ctx.fillStyle = grad;
        ctx.fillRect(0, 0, a_canvas.width, a_canvas.height);
    
    }

    function draw_cat() {
      var canvas = document.getElementById("a");
      var context = canvas.getContext("2d");
      var cat = document.getElementById("cat");
      for (var x = 0, y = 0; x < 500 && y < 375; x += 50, y += 37) 
            context.drawImage(cat, x, y, 88, 56);    
    }

canvas {
    border-style: dotted;
    border-width: 1px;
}