JSFiddle - React, Tailwind, and code Playground

by artwl

HTML

<div>
    <img src="http://www.baidu.com/img/bdlogo.gif" alt=""/>
    <canvas id="canvas"></canvas>
</div>

CSS

div{
    position:relative;
}
img, canvas{
    position:absolute;
    left:0;
    top:0;
}
canvas{
    border:1px solid #CCC;
}

JavaScript

draw();

function draw(){
    var ctx = document.getElementById('canvas').getContext('2d');
    ctx.fillStyle = '#F60';
    ctx.fillRect(0, 0, 300, 150);
    ctx.globalCompositeOperation = 'destination-out';
    ctx.fillStyle = '#06F';
    ctx.fillRect(10, 10, 190, 100);
    ctx.fillStyle = '#666';
    ctx.fillRect(100, 40, 190, 100);
}