JSFiddle - React, Tailwind, and code Playground

HTML

<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">

CSS

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

JavaScript

// 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,...