JSFiddle - React, Tailwind, and code Playground

by digitalicarus

HTML

<html>
  <head>
  </head>
  <body>
    <canvas></canvas>
  </body>
</html>

JavaScript

var canvas = document.getElementsByTagName('canvas')[0]
,   ctx    = canvas.getContext("2d")
,   flipY  = true
;

canvas.style.background = "#000";
canvas.width  = 320;
canvas.height = 200;

example = [
    {
        //head
        points: [-1,2,-3,3,-3,6,-1,7,1,7,3,6,3,3,1,2,-1,2]
    },
    {
        //body
        points: [-3,2,3,2,3,-1,-3,-1,-3,2]
    },
    {
        //left leg
        points: [-3,0,-4,-2,-2,-1,-4,-2,-4,-4,-5,-4,-3,-4]
    },
    {
        //right leg
        points: [3,0,4,-2,2,-1,4,-2,4,-4,5,-4,3,-4]
    },
    {
        //thrust skirt
        points: [0,-1,-2,-3,2,-3,0,-1]
    }
];

ctx.save();
ctx.strokeStyle = "lime";
ctx.scale(5,5);
ctx.translate(15,15);

for(var i=0; i<example.length; i++) {
  ctx.lineWidth = 1/5;
  ctx.beginPath();
  ctx.moveTo(example[i].points[0], (flipY) ? -example[i].points[1] : example[i].points[1]);
  for(var j=2; j<example[i].points.length; j+=2) {
    ctx.lineTo(example[i].points[j], (flipY) ? -example[i].points[j+1] : example[i].points[j+1]);
  }
  ctx.stroke();
  ctx.closePath();
}

//ctx.moveTo(0,0);
//ctx.lineTo(5,5);
//ctx.stroke();

ctx.restore();