JSFiddle - React, Tailwind, and code Playground

by cat_991

HTML

<body>
	<canvas id="myCanvas" width="400" height="400" style="border:1px
  solid #000000;"></canvas>
</body>

JavaScript

var canvas = document.getElementById("myCanvas"); //get Canvas
var pen = canvas.getContext("2d")

drawLine2 (0, 0, 100, -80, 5, '00ff00')

function drawLine (x1, y1, x2, y2, s, hex) {
  pen.strokeStyle = "#" + hex;
  pen.lineWidth = s;
	pen.beginPath();
	pen.moveTo(x1 + 200, 200-y1);
	pen.lineTo(x2 + 200, 200-y2);
	pen.stroke();
}

function drawLine2 (x, y, length, dir, s, hex) {
  drawLine(x, y, x+ (length* Math.cos((Math.PI/180)*dir)), y+ (length* Math.sin((Math.PI/180)*dir)), s, hex)
  //sprite.x = x+ (length* Math.cos((Math.PI/360)*d));
  //sprite.y = y+ (length* Math.sin((Math.PI/360)*d));
}