JSFiddle - React, Tailwind, and code Playground

Convert SVG Path from Sketch to canvas drawing.

by nilloc

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.11.5/paper-full.min.js"></script>
<div id="frame">
<!-- <svg id="design" width="102px" height="36px" viewBox="0 0 102 36" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    Generator: Sketch 51.2 (57519) - http://www.bohemiancoding.com/sketch
    <desc>Created with Sketch.</desc>
    <defs></defs>
    <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" opacity="0.690290179">
        <g id="statement-svg-bg-top" fill="#9B9B9B">
            <path d="M4,0 L12.7573593,4.4408921e-16 C13.5530088,2.97930773e-16 14.3160705,0.316070521 14.8786797,0.878679656 L19.1213203,5.12132034 C19.6839295,5.68392948 20.4469912,6 21.2426407,6 L34.7573593,6 C35.5530088,6 36.3160705,5.68392948 36.8786797,5.12132034 L41.1213203,0.878679656 C41.6839295,0.316070521 42.4469912,-2.97930773e-16 43.2426407,-4.4408921e-16 L98,-3.99680289e-15 C100.209139,-4.40261514e-15 102,1.790861 102,4 L102,26 C102,28.209139 100.209139,30 98,30 L43.2426407,30 C42.4469912,30 41.6839295,30.3160705 41.1213203,30.8786797 L36.8786797,35.1213203 C36.3160705,35.6839295 35.5530088,36 34.7573593,36 L21.2426407,36 C20.4469912,36 19.6839295,35.6839295 19.1213203,35.1213203 L14.8786797,30.8786797 C14.3160705,30.3160705 13.5530088,30 12.7573593,30 L4,30 C1.790861,30 2.705415e-16,28.209139 0,26 L0,4 C-2.705415e-16,1.790861 1.790861,4.05812251e-16 4,0 Z" id="Path-6"></path>
        </g>
    </g>
</svg> -->
<label for="files">Select a file: </label>
<input id="files" type="file" />
<fieldset id="settings" name=>
  <label for="subdivisions">Sub Divisions</label> <input type="number" value="5" name="subdivisions" id="subdivisions">
  <br>
  <br><label for="accuracy">Accuracy</label> <input type="number" id="accuracy" name="accuracy"  step="0.01" value="0.1"/>
</fieldset>

<output id="result" />
<div id="svg-holder"></div>

<div id="design"></div>
<div id="display">
  <div...

CSS

body{
  font-family:Helvetica, Arial, sans-serif;
}
label{
  font-size:10px;
}

#frame{
  display:flex;
  flex-direction:column;
  background-color:#aaa;
  padding:5px;
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
}

#design, #display, #css-output{
  padding:20px;
  background-color:white;
  box-shadow:0 0 5px hsla(0,0%,0%,0.3) inset;
  border-radius:5px;
  margin:10px 0;
  overflow:auto;
  border:none;
  outline:none;
   flex:0;
}

#tester{
  background-color:teal;
  color:white;
  font-family:monospace;
  padding:6px 10px;
  box-sizing:border-box;
   flex:0;
}

#myCanvas{
  display:none; /* unhide to debug */
}

#output{
  white-space:pre-wrap;
  flex:0;
}

#css-output{
  padding:2px;
  box-sizing:border-box;
  width:100%;
  /* height:280px; */
  flex:3;
  margin:0;
}

JavaScript

function convertSVGtoPath(){
  let outputDisplay = document.querySelector('#output');
  let svgToConvert = document.querySelector('#design>svg');
  let svgCoords = svgToConvert.getAttribute('viewBox').split(' ');
  let firstPath = svgToConvert.querySelector('path#clip-path');
  if(!firstPath){alert('Please select an SVG with a path named "clip-path"')}
  let firstPathData = firstPath.getAttribute('d'); //.split(/\s([MLCZ][0-9]*.[0-9]*,[0-9]*.[0-9]*)/g);
  let sliceRect = svgToConvert.querySelector('rect#slice-bounds');

  let tester = document.querySelector('#tester');
  
  let accuracy = Number(document.querySelector('#accuracy').value);
  let subdivisions = Number(document.querySelector('#subdivisions').value);
  
  tester.style.width = '300px'; //svgCoords[2]+'px';
  tester.style.height = '60px'; //svgCoords[3]+'px';

  // Get a reference to the canvas object
  let canvas = document.getElementById('myCanvas');
  canvas.width = svgCoords[2]*4;
  canvas.height = svgCoords[3]*4;
  canvas.style.width = (svgCoords[2]*2)+'px';
  canvas.style.height = (svgCoords[3]*2)+'px';
  canvas.getContext('2d').scale(2,2)

  // Create an empty project and a view for the canvas:
  let scope = paper.setup(canvas);

  console.log(scope.view.pixelRatio, scope.view.resolution);

  // Create a Paper.js Path to draw a line into it:
  let path = new paper.Path();
  // let polyPath = new paper.Path();
	// polyPath.strokeColor = new paper.Color(0,0,0,1);
  
  // Give the stroke a color
  path.strokeColor = new paper.Color(0,0.5,0.5,0.7);
  path.strokeWidth = 3;

  /* This is gonna make it easier to auto scale things */
  /* if x > svgCoordinates[2] / 2  subtract from right side in CSS polygon*/
  /* if y > svgCoordinates[3] / 2  subtract from bottom in CSS polygon */

  let pathCoords = firstPathData.split(/\s?([MLHVCSQTAZ])/g);
  let start = new paper.Point(0, 0);

  let outputText = "Output:\n"+svgCoords; // + '\n' + firstPathData;

  for(var i=0; i < pathCoords.length; i++){
    let...