JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://raw.github.com/caleb531/jcanvas/master/jcanvas.min.js"></script>
<canvas id="canvas1" width="380" height="200"></canvas>

JavaScript

var patt = $("canvas").pattern({
  width: 40, height: 40,
  source: function(ctx) {
    ctx.beginPath();
    ctx.moveTo(0.0, 40.0);
    ctx.lineTo(26.9, 36.0);
    ctx.bezierCurveTo(31.7, 36.0, 36.0, 32.1, 36.0, 27.3);
    ctx.lineTo(40.0, 0.0);
    ctx.lineTo(11.8, 3.0);
    ctx.bezierCurveTo(7.0, 3.0, 3.0, 6.9, 3.0, 11.7);
    ctx.lineTo(0.0, 40.0);
    ctx.closePath();
    ctx.fillStyle = "rgb(188, 222, 178)";
    ctx.fill();
    ctx.lineWidth = 0.8;
    ctx.strokeStyle = "rgb(0, 156, 86)";
    ctx.lineJoin = "miter";
    ctx.miterLimit = 4.0;
    ctx.stroke();
  },
  repeat: "repeat",
});
$("canvas").drawEllipse({
  fillStyle: patt,
  x: 50, y: 20,
  width: 300, height: 150,
  fromCenter: false
});