Вы должны указать своей программе нарисовать прямоугольник, который вы указали с помощью команды ctx.stroke();
.Пример приведен во фрагменте ниже, вам нужно нажать на iframe, а затем нажать стрелку вниз для его регистрации.
Дайте мне знать, если это не сработает.
document.onkeydown = checkKey;
function checkKey(e) {
e = e || window.event;
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
if (e.keyCode == '38') {
}
else if (e.keyCode == '40') {
console.log("Down Arrow");
ctx.rect( 10,10,20,20);
ctx.stroke();
}
else if (e.keyCode == '37') {
// left arrow
}
else if (e.keyCode == '39') {
// right arrow
}
}
.box {
height: 100px;
width: 100px;
border: 1px solid black;
}
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
</canvas>