JSFiddle - React, Tailwind, and code Playground

by YOUNY zhu

HTML

<h4>Diagonal stripes are in clipping region</h4>
<canvas id="canvas" width=600 height=600></canvas>

CSS

body {
    background-color: ivory;
}

JavaScript

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");



    draw();

function draw() {
    var x = 50;
    var y = 50;
    var w = 400;
    var h = 400;

    ctx.save();

    ctx.fillStyle = "#00ff00"; //Color for four surrounded area.

    ctx.beginPath();

    r = Math.sqrt((h / 2) * (h / 2) + 16 * w * w);
    thea = Math.atan(h / w / 8);
    ctx.arc(x + w * 4, y + h / 2, r, Math.PI - thea, Math.PI + thea, false);
    ctx.closePath();

    r = Math.sqrt((h / 2) * (h / 2) + 16 * w * w);
    thea = Math.atan(h / w / 8);
    ctx.arc(x - w * 3, y + h / 2, r, -thea, thea, false);
    ctx.closePath();

    r = Math.sqrt((w / 2) * (w / 2) + 16 * h * h);
    thea = Math.atan(w / h / 8);
    ctx.arc(x + w / 2, y + 4 * h, r, Math.PI * 3 / 2 - thea, Math.PI * 3 / 2 + thea, false);
    ctx.closePath();

    r = Math.sqrt((w / 2) * (w / 2) + 16 * h * h);
    thea = Math.atan(w / h / 8);
    ctx.arc(x + w / 2, y - 3 * h, r, Math.PI / 2 - thea, Math.PI / 2 + thea, false);
    ctx.closePath();
    ctx.clip();
    ctx.fill();
    //ctx.drawImage(img, 0, 0);

    ctx.restore();
        ctx.save();	// save the context so we don't mess up others
        ctx.beginPath();
        ctx.fillStyle = "#ffffff";
        ctx.fillRect(x, y, w, h);
        ctx.stroke();
        ctx.restore();	// restore context to what it was on entry
}