JSFiddle - React, Tailwind, and code Playground

by m1erickson

HTML

<h4>Click in the blue canvas to get focus<h4><h4>Then use number-pad to move the rectangle</h4>
<canvas id="canvas" width=300 height=300></canvas>

CSS

body{ background-color: ivory; }
canvas{border:1px solid blue;}

JavaScript

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

var distance=4;
var object = {
    height: 40,
    width: 40,
    x: 10,
    y: 10, 
    color: "#FF0000"        
}

renderObject();

document.body.onkeydown=function(event){
    
    switch(event.keyCode){
        case 97: // 1
            object.x-=distance;
            object.y+=distance;        
            break;
        case 98: // 2
            object.x+=0;
            object.y+=distance;
            break;
        case 99: // 3
            object.x+=distance;
            object.y+=distance;        
            break;
        case 100: // 4
            object.x-=distance;
            object.y+=0;        
            break;
        case 101: // 5
            object.x+=0;
            object.y+=0;        
            break;
        case 102: // 6
            object.x+=distance;
            object.y+=0;        
            break;
        case 103: // 7
            object.x-=distance;
            object.y-=distance;        
            break;
        case 104: // 8
            object.x+=0;
            object.y-=distance;        
            break;
        case 105: // 9
            object.x+=distance;
            object.y-=distance;        
            break;
    }
    
    renderObject();
    
}

function renderObject(){
    if(ctx.fillStyle!=object.color.toLowerCase()){
        console.log(ctx.fillStyle,object.color);
        ctx.fillStyle=object.color;
    }
    ctx.clearRect(0,0,canvas.width,canvas.height);
    ctx.fillRect(object.x,object.y,object.width,object.height);
}