JSFiddle - React, Tailwind, and code Playground

by YOUNY zhu

HTML

<canvas id="canvas" width="600" height="600"></canvas>

JavaScript

var canvas = document.getElementById('canvas');
      var ctx = canvas.getContext('2d');
      this.x = 50
      this.y = 50
      this.w = 400;
      this.h = 400;
      var r;

      ctx.save();	// save the context so we don't mess up others
        ctx.beginPath();
        ctx.fillStyle = "#ffffff";
        ctx.rect(this.x, this.y, this.w, this.h);
        ctx.fill();
        ctx.restore();	// restore context to what it was on entry
        ctx.fillStyle = "#00ff00";//Color for four surrounded area.
        ctx.save();	// save the context so we don't mess up others
        ctx.beginPath();
        r = Math.sqrt((this.h/2)*(this.h/2) + 16 *this.w * this.w);
        thea = Math.atan(this.h/this.w/8);
        ctx.arc(this.x + this.w*4, this.y + this.h/2, r , Math.PI - thea,  Math.PI+thea, false);
        ctx.closePath();
        ctx.fill();
        //ctx.clip();
        ctx.restore();	// restore context to what it was on entry

        ctx.save();	// save the context so we don't mess up others
        ctx.beginPath();
        r = Math.sqrt((this.h/2)*(this.h/2) + 16 *this.w * this.w);
        thea = Math.atan(this.h/this.w/8);
        ctx.arc(this.x- this.w*3, this.y + this.h/2, r , -thea,  thea, false);
        ctx.closePath();
        ctx.fill();
        //ctx.clip();
        ctx.restore();	// restore context to what it was on entry

        ctx.save();	// save the context so we don't mess up others
        ctx.beginPath();
        r = Math.sqrt((this.w/2)*(this.w/2) + 16 * this.h * this.h);
        thea = Math.atan(this.w/this.h/8);
        ctx.arc(this.x + this.w/2, this.y + 4 * this.h, r , Math.PI*3/2-thea,  Math.PI*3/2 + thea, false);
        ctx.closePath();
        ctx.fill();
        ctx.restore();	// restore context to what it was on entry
        ctx.save();	// save the context so we don't mess up others
        ctx.beginPath();

        r = Math.sqrt((this.w/2)*(this.w/2) + 16*this.h*this.h);
        thea = Math.atan(this.w/this.h/8);
       ...