JSFiddle - React, Tailwind, and code Playground

by nhoughto5

HTML

<canvas id="myCanvas" width="512" height="600" style="border:1px solid #d3d3d3;">
    Your browser does not support the HTML5 canvas tag.
</canvas>
<svg id="svgTag" style="background: url('https://image.ibb.co/h9CWiR/odd_size.png') no-repeat " xmlns="http://www.w3.org/2000/svg" version="1.0" width="379.000000" height="540.000000" viewBox="0 0 379.000000 540.000000" preserveAspectRatio="xMidYMid meet">
    <g transform="translate(0.000000,540.0000) scale(1.000000,-1.000000)" fill="#000000" stroke="none">
        <path d="M172 147
               c-21 -1 -69 -8 -74 -10
               l-2 -1 0 -32 0 -33 3 -4
               c9 -14 31 -36 44 -45
               12 -9 16 -11 27 -13
               2 -1 8 -2 12 -2
               9 -2 33 -3 34 -1
               0 1 1 1 2 1
               2 0 6 1 9 2
               16 5 29 14 47 32
               l9 8 0 44
               c0 33 0 43 -1 44 -4 3 -31 8 -49 10 -14 1 -44 1 -61 0
               z"/>
    </g>
</svg>

JavaScript

const commandString = /[\-0-9,. ]+/ig;
  const commandPattern = /[A-z]+/ig;
  const stringSplit = /[, ]+/ig;
  const shiftX = 0, shiftY = 0;
	const translateX = 0, translateY = 0;
  
  function cleanArray(array) {
    const tmpArray = [];
    for (let i = 0; i < array.length; i++) {
      if (array[i].length > 0) {
        tmpArray.push(parseInt(array[i]));
      }
    }
    return tmpArray;
  }
  function move(array, context) {
    let x = array[0];
    let y = array[1];
    context.moveTo(x + shiftX, y + shiftY);
    //context.fill();
  }

  function quadraticTo(array, context) {
    let x = array[0];
    let y = array[1];
    let x1 = array[2];
    let y1 = array[3];
    context.quadraticCurveTo(x + shiftX, y + shiftY, x1 + shiftX, y1 + shiftY);
    context.fill();
    if (array.length > 4) {
      quadraticTo(array.splice(4, array.length), context);
    }
  }

  function lineTo(array, context) {
    let x = array[0];
    let y = array[1];
    context.lineTo(x + shiftX, y + shiftY);
    context.fill();
    if (array.length > 2) {
      lineTo(array.splice(2, array.length), context);
    }
  }

  function curveTo(array, context) {
    let x = array[0];
    let y = array[1];
    let x1 = array[2];
    let y1 = array[3];
    let x2 = array[4];
    let y2 = array[5];
    context.bezierCurveTo(x + shiftX, y + shiftY, x1 + shiftX, y1 + shiftY, x2 + shiftX, y2 + shiftY);
    context.fill();
    if (array.length > 6) {
      this._curveTo(array.splice(6, array.length), context);
    }
  }
  
  function draw(path, context){
    var commands = path.split(commandPattern);
    var commandArray = path.split(commandString);
		context.translate(translateX, translateY);
    for (let i = 0, len = commandArray.length; i < len; i++) {
      let action = commandArray[i].toUpperCase();
      if (typeof commands[i] === 'undefined') break;

      const array = cleanArray(commands[i].split(stringSplit));
      switch (action) {
        case "M":
          move(array, context);
      ...