JSFiddle - React, Tailwind, and code Playground

by dmgolsh

HTML

<!DOCTYPE html>
<html>
  <head>
    <title>Logomove</title>
    <meta charset="UTF-8" />
  </head>

  <body>
    <canvas
      id="canvas"
      width="400"
      height="400"
      style="border: 8px solid white; background: black;"
    >
    </canvas>

    <script src="script.js"></script>
  </body>
</html>

JavaScript

let canvas = document.getElementById("canvas");
let ctx = canvas.getContext("2d");

canvas.width = 400;
canvas.height = 400;

const movePosition = 25;
let coordX = 120;
let coordXV = 150;
let coordXVD = 300;
let coordY_one = 150;
let coordY_two = 250;
let coordY_three = 128;
let coordY_four = 272;


// Create our primary canvas and fill it with the pattern
const RootCanvas = document.createElement('canvas');
const Rctx = RootCanvas.getContext('2d');
const pattern = Rctx.createPattern(canvas, 'repeat');

Rctx.fillStyle = pattern;
Rctx.fillRect(0, 0, canvas.width, canvas.height);

document.addEventListener("keydown", function (e) {
  if (e.key === "ArrowLeft") {
    console.log(e);
    moveY(-movePosition);
  }

  if (e.key === "ArrowUp") {
    moveX(-movePosition);
  }

  if (e.key === "ArrowRight") {
    console.log(e);
    moveY(movePosition);
  }

  if (e.key === "ArrowDown") {
    console.log(e);
    moveX(movePosition);
  }
});

function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.lineWidth = 16;
  ctx.beginPath();
  ctx.moveTo(coordY_one, coordX);
  ctx.lineTo(coordY_two, coordX);
  ctx.strokeStyle = "white";
  ctx.stroke();

  ctx.beginPath();
  ctx.moveTo(coordY_three, coordXV);
  ctx.lineTo(coordY_three, coordXVD);
  ctx.strokeStyle = "white";
  ctx.stroke();

  ctx.beginPath();
  ctx.moveTo(coordY_four, coordXV);
  ctx.lineTo(coordY_four, coordXVD);
  ctx.strokeStyle = "white";
  ctx.stroke();
}


function moveX(pos) {
  coordX = coordX + pos;
  coordXVD = coordXVD + pos;
  coordXV = coordXV + pos;
  console.log(coordX);
}

function moveY(pos) {
  coordY_one += pos;
  coordY_two += pos;
  coordY_three += pos;
  coordY_four += pos;
}

setInterval(draw, 10);