JSFiddle - React, Tailwind, and code Playground
HTML
<canvas id="dialStage" width="800" height="600">
</canvas>
JavaScript
var canvas = document.getElementById("dialStage");
var stage = new createjs.Stage(canvas);
createjs.Ticker.addEventListener("tick", stage);
createjs.Ticker.addEventListener("tick", tick);
var nPressed = true;
var ePressed = false;
var sPressed = false;
var wPressed = false;
var line = new createjs.Shape();
stage.addChild(line);
var startX = 400;
var startY = 300;
var color = 0xFFFFFF;
function tick(){
if(nPressed)
{
line.graphics.setStrokeStyle(3);
line.graphics.beginStroke(color);
line.graphics.moveTo(startX, startY);
startY--;
line.graphics.lineTo(startX, startY);
line.graphics.endStroke();
}
if(ePressed)
{
line.graphics.setStrokeStyle(3);
line.graphics.beginStroke(color);
line.graphics.moveTo(startX, startY);
startX++;
line.graphics.lineTo(startX, startY);
line.graphics.endStroke();
}
if(wPressed)
{
line.graphics.setStrokeStyle(3);
line.graphics.beginStroke(color);
line.graphics.moveTo(startX, startY);
startX--;
line.graphics.lineTo(startX, startY);
line.graphics.endStroke();
}
if(sPressed)
{
line.graphics.setStrokeStyle(3);
line.graphics.beginStroke(color);
line.graphics.moveTo(startX, startY);
startY++;
line.graphics.lineTo(startX, startY);
line.graphics.endStroke();
}
}
window.onkeydown = function(e){
color = createjs.Graphics.getRGB(0xFFFFFF * Math.random(), 1);
switch(e.which){
case 38:
wPressed = false;
ePressed = false;
sPressed = false;
nPressed = true;
break;
case 39:
nPressed = false;
sPressed = false;
wPressed = false;
ePressed = true;
break;
case 40:
wPressed = false;
ePressed = false;
nPressed = false;
...