James432213 Posted April 9, 2019 Share Posted April 9, 2019 Hi, why does the canvas not clear via the updateCanvas() function. I believe it has to do something, "window.onload = canvas", but without it I am unable to draw the Player Image as it doesn't work with out window.onload. Thank you. <!DOCTYPE html> <html> <head> <title>Mr K - Interactive Online Game</title> <script> window.onload = canvas; var Player; var xPos=100; var yPos=375; function canvas(){ var canvas = document.getElementById("myCanvas"); canvas.addEventListener('keydown', doKeyDown, true); ctx = canvas.getContext("2d"); Player = document.getElementById("MrK"); drawPlayer(xPos,yPos); } //drawImage(imgSrc, sx, sy, sw, sh,dx,dy, dw, dh); function doKeyDown(e){ switch(event.keyCode){ case 37: {//Left arrow updateCanvas(); xPos=xPos-10; drawPlayer(xPos,yPos); break; } //Up arrow } } function updateCanvas(){ alert('cleared'); ctx.clearRect(0,0, canvas.width, canvas.height); } function drawPlayer(x,y){ ctx.drawImage(Player,x,y,100,100); } </script> </head> <body> <section style="border-style: solid; border-width: 2px; width: 1000px; height:500px;"> <canvas id="myCanvas" width="1000" height="500" tabindex="0" >Canvas tag not supported </canvas> <img id="MrK" src="MrKPlayer - Copy.png" style="display:none;"/> </section> <p>To begin, click on game.</p> </body> </html> Quote Link to comment Share on other sites More sharing options...
b10b Posted April 9, 2019 Share Posted April 9, 2019 @James432213 hi, many issues here, all solvable. 1) The function named "canvas" rename this and avoid some confusion, call it "init" or similar 2) doKeyDown function has parameter "e" but references "event" in the switch - be consistent. 3) the functions doKeyDown, updateCanvas, drawPlayer are scoped "above" the "init" function, so they can have no easy reference to the "canvas" variable defined within "init". Notice also the name collision of "canvas" if we ignore step 1. Easy fix is to move these function declarations inside the "init" function. 4) There's nothing wrong with ctx.clearRect Some basics in how to debug your code will be beneficial, in particular the developer console (F12) is great, and using "console.log" can send helpful messages there from your code. Use that as a start towards watching the flow of your code when it runs, and where things are not actually working as might be expected on a first draft of code. This will lead to more advanced debugging techniques and more elaborate (and working) code. hotfeet and James432213 2 Quote Link to comment Share on other sites More sharing options...
James432213 Posted April 11, 2019 Author Share Posted April 11, 2019 I appreciate your answers. Thank you. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.