Perplexity

Experiment resulting from reading tutorial at https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Basic_usage

by angstrey

HTML

<canvas id="tutorial" width="110" height="110">
    Your browser doesn't support canvas!
</canvas>

CSS

#tutorial
{
    border: solid 1px #999;
    box-shadow: 10px 10px 5px #ccc;
}

JavaScript

function draw(id) {
    var canvas = document.getElementById(id);

    if (!canvas.getContext) {
        return;
    }
   
    var ctx = canvas.getContext("2d");
       
    ctx.fillStyle = "rgb(0, 0, 0)";
    ctx.fillRect(0, 0, 110, 110);
    
    ctx.fillStyle = "rgba(200, 00, 0, .5)";
    ctx.fillRect(10, 10, 50, 50);
    
    ctx.fillStyle = "rgba(0, 0, 200, .5)";
    ctx.fillRect(30, 30, 50, 50);
    
    ctx.fillStyle = "rgba(0, 200, 0, .5)";
    ctx.fillRect(50, 10, 50, 50);
    
    ctx.fillStyle = "rgba(200, 200, 0, .5)";
    ctx.fillRect(10, 50, 50, 50);

    ctx.fillStyle = "rgba(0, 200, 200, .5)";
    ctx.fillRect(50, 50, 50, 50);
    
    ctx.strokeStyle = "rgb(255, 255, 255)";
    ctx.strokeRect(30, 30, 50, 50);
}

draw("tutorial");