JSFiddle - React, Tailwind, and code Playground

by zur4ik

HTML

<canvas id="c1" width="1000" height="1000"></canvas>

JavaScript

function draw(ctx) {
  ctx.save();
  ctx.scale(1,1);
  ctx.strokeStyle = 'rgba(0,0,0,0)';
  ctx.lineCap = 'butt';
  ctx.lineJoin = 'miter';
  ctx.miterLimit = 4;
  ctx.save();
  ctx.beginPath();
  ctx.moveTo(259.3,17.8);
  ctx.lineTo(194,150.2);
  ctx.lineTo(47.9,171.5);
  ctx.bezierCurveTo(21.7,175.3,11.199999999999996,207.6,30.2,226.1);
  ctx.lineTo(135.9,329.1);
  ctx.lineTo(110.9,474.6);
  ctx.bezierCurveTo(106.4,500.90000000000003,134.1,520.6,157.3,508.3);
  ctx.lineTo(288,439.6);
  ctx.lineTo(418.7,508.3);
  ctx.bezierCurveTo(441.9,520.5,469.59999999999997,500.90000000000003,465.09999999999997,474.6);
  ctx.lineTo(440.09999999999997,329.1);
  ctx.lineTo(545.8,226.10000000000002);
  ctx.bezierCurveTo(564.8,207.60000000000002,554.3,175.3,528.0999999999999,171.50000000000003);
  ctx.lineTo(382,150.2);
  ctx.lineTo(316.7,17.8);
  ctx.bezierCurveTo(305,-5.800000000000001,271.09999999999997,-6.099999999999998,259.3,17.8);
  ctx.closePath();
  ctx.fill();
  ctx.stroke();
  ctx.restore();
  ctx.restore();
};

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


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


draw(ctx);