JSFiddle - React, Tailwind, and code Playground

by sperske

HTML

<canvas id='world' height='600' width='600'/>

CSS

#world {
    width: 600px;
    height: 600px;
}

JavaScript

var world = document.getElementById('world'),
    context = world.getContext("2d");

function drawTriangle(x, y, direction, size, ctx) {
  ctx.fillStyle="rgb(75,128,166)";
  ctx.beginPath();
  if(direction > 0) {
    //pointed Up
    ctx.moveTo(x, y-size);
    ctx.lineTo(x-size, y+size);
    ctx.lineTo(x+size, y+size);
    ctx.lineTo(x, y-size);
  } else {
    //Pointed Down
  }
  ctx.fill();
}

drawTriangle(25, 25, 1, 28, context);