Canvas sandbox

canvas

HTML

<canvas id="mycanvas">
    
</canvas>

<div id="output"></div>

CSS

#mycanvas {
    width: 300px;
    height: 300px;
    border: 1px solid black;
}

JavaScript

var canvas = $("#mycanvas").get(0);
canvas.width = 300;
canvas.height = 300;
var ctx = canvas.getContext("2d");
ctx.setTransform(1, 0, 0, -1, 0, 300);
ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, 300, 300);

let str = "-14,7 -14,5 -14,1 -14,-7 -14,-5 -14,-1 -13,-4 -13,-8 -13,-2 -13,-2 -13,8 -13,2 -13,-4 -13,4 -13,2 -13,4 -11,-10 -11,10 -11,8 -11,-8 -11,8 -11,-8 -10,-11 -10,11 -8,-11 -8,-13 -8,13 -8,-11 -8,13 -7,14 -7,10 -7,10 -7,-14 -7,14 -7,10 -7,10 -5,14 -5,10 -5,-14 -5,10 -5,14 -5,10 -5,10 -4,11 -4,-13 -4,11 -4,-13 -4,11 -4,11 -2,-13 -2,13 -2,13 -2,-13 -1,-14 -1,14 1,-14 1,14 2,-13 2,13 2,13 2,-13 4,13 4,13 4,-13 4,-13 5,-14 5,14 7,-14 7,14 8,13 8,-11 8,11 8,-11 8,-13 8,11 10,-11 10,11 11,10 11,-8 11,8 11,-10 11,8 11,-8 13,4 13,-2 13,2 13,4 13,-4 13,8 13,-8 13,-2 13,2 13,-4 14,-7 14,-1 14,1 14,5 14,7 14,-5"

ctx.moveTo(40, 40);
ctx.beginPath();
ctx.strokeStyle = "black";
str.split(" ").map( x => {
  a = x.split(',');
  c.lineTo(+x * 10, +y * 10);
});
ctx.stroke();