JSFiddle - React, Tailwind, and code Playground

by binevv

HTML

<canvas id="canvas" width=800 height=550></canvas>

CSS

body{ background-color: ivory; }
#canvas{border:1px solid red; }

JavaScript

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var pts = [
  {
    "x": 144.54545454545456,
    "y": 357.3227658791164
  },
  {
    "x": 313.6363636363636,
    "y": 357.83576331700544
  },
  {
    "x": 482.72727272727275,
    "y": 390.79970884062334
  },
  {
    "x": 651.8181818181818,
    "y": 342.08032949810206
  },
  {
    "x": 820.909090909091,
    "y": 359.5816507117245
  },
  {
    "x": 990,
    "y": 394.7374924508338
  },
  {
    "x": 1159.090909090909,
    "y": 375.44796552459445
  },
  {
    "x": 1328.1818181818182,
    "y": 348.80309018743964
  },
  {
    "x": 1497.2727272727273,
    "y": 387.65889083719674
  },
  {
    "x": 1666.3636363636363,
    "y": 361.47353311915924
  },
  {
    "x": 1835.4545454545455,
    "y": 389.24337978312957
  },
  {
    "x": 1835.4545454545455,
    "y": -10000
  },
  {
    "x": 144.54545454545456,
    "y": -10000
  },
  {
    "x": 144.54545454545456,
    "y": 357.3227658791164
  }
],
bufferSpace = 2,
clipX = 144.5,
clipY = 245,
clipWidth = 1692,
clipHeight = 580;

ctx.beginPath();
ctx.moveTo(pts[0].x, pts[0].y + bufferSpace);
for (var i = 0; i < pts.length; i++) {
  var pt = pts[i];
  ctx.lineTo(pt.x, pt.y + bufferSpace);
}
ctx.fillStyle = "red";
ctx.globalAlpha = 0.8;
ctx.closePath();
ctx.fill();

ctx.fillStyle = "blue";
ctx.globalAlpha = 0.2;
////ctx.fillStyle = fillcolor;
ctx.fillRect(clipX, clipY, clipWidth, clipHeight);

//ctx.save();
//ctx.clip();

//ctx.globalAlpha = 0.8;
//ctx.fillStyle = fillcolor;
//ctx.fillRect(clipX, clipY, clipWidth, clipHeight);
//loadPatternImage(clipX, clipY, clipWidth, clipHeight);

//ctx.restore();