JSFiddle - React, Tailwind, and code Playground

HTML

<div id="bg-canvas"></div>

CSS

#bg-canvas{
    background-image: -moz-element(#background);
    background: -webkit-canvas(background);
    height:400px;
}

JavaScript

// ChromeかFirefoxで処理を変える
function getBgCanvas(id, width, height){
    var ctx = false;
    if(document.getCSSCanvasContext){ // webkit用の指定
        ctx = document.getCSSCanvasContext('2d', id, width, height);
    }else if(document.mozSetImageElement){ // Firefox用の指定
        var canvas = document.createElement('canvas');
        canvas.setAttribute("width", width);
        canvas.setAttribute("height", height);
        ctx = canvas.getContext('2d');
        document.mozSetImageElement(id, canvas);
    }
    return ctx;
}

var ctx = getBgCanvas('background', 100, 400);

// ピンクの丸
ctx.beginPath();
ctx.strokeStyle = '#F8C1C6';
ctx.fillStyle = '#F8C1C6';
ctx.arc(50,50,50,0,Math.PI*2,true);
ctx.fill();
ctx.stroke();
// 白の丸
ctx.beginPath();
ctx.strokeStyle = '#E3D8C4';
ctx.fillStyle = '#E3D8C4';
ctx.arc(50,150,50,0,Math.PI*2,true);
ctx.fill();
ctx.stroke();
// 緑の丸
ctx.beginPath();
ctx.strokeStyle = '#849865';
ctx.fillStyle = '#849865';
ctx.arc(50,250,50,0,Math.PI*2,true);
ctx.fill();
ctx.stroke();
//茶色い長方形
ctx.fillStyle = '#D8CFAF';
ctx.fillRect(45,300,10,100);