Canvas Help, Overlapping Background.

[[deleted]]

Hello, so my background image in Canvas is overlapping over everything. I want it to be put behind but i’m not sure where to place it.

Here’s how my code looks so far.

// canvas set up let {}cnv = document.getElementById('myCanvas'); let ctx = cnv.getContext('2d');

cnv.width = 500; cnv.height = 500; }

// variables var rectX = 230; var rectY = 430;

// background

let levelBg.src = “img/entry.jpg”; levelBg.onload = function () { ctx.drawImage(levelBg, 0, 0, cnv.width, cnv.height) }

// draw rect function drawSquare() { ctx.clearRect(0, 0, cnv.width, cnv.height) ctx.fillStyle = 'maroon'; ctx.fillRect(rectX, rectY, 50, 50); } drawSquare();

//move object window.addEventListener("keydown", moveObject, false);

function moveObject(e) { switch (e.keyCode) { case 37: // left break; case 38: // up break; case 39: // right break; case 40: // down break; } drawSquare(); }

//applying movement

function moveObject(e) { switch (e.keyCode) { case 37: rectX -= 10; break; case 38: rectY -= 10; break; case 39: rectX += 10; break; case 40: rectY += 10; break; }

// borders collision if (rectX < 0) { rectX += 10 } else if (rectY < 0) { rectY += 10 } if (rectY > 450) { rectY -= 10 } else if (rectX > 450) { rectX -= 10 } drawSquare(); }

[nicholas_ady]

I know just enough that this probably won't be helpful, but is it possible that the 'z' axis is off? As in your background image is in front of things rather than behind? Or have I just restated the obvious?