I wrote JavaScript to move the cat on the canvas: "ฅ (* ΦωΦ *) ฅ" But the cat jumps weird

Question

I created a script that uses HTML input buttons to move the cat to the canvas. Each click moves the cat 10 pixels in the direction it is clicked (moveUp (); moveDown (); moveLeft (); moveRight ();). This script works great for the first 10-20 clicks, but then the cat eventually jumps or gets stuck in one place.

I have no idea why he is behaving this way. can anyone help?

The program is on jsfiddle, you can check it out

https://jsfiddle.net/rockmanxdi/h2sk2sjz/2/

JavaScript code is below:

let surface=document.getElementById("drawingArea"); let ctx=surface.getContext("2d"); let cor_x; let cor_y; /** draw a cat * input the coordinates x and y for the center of the cat * does not return, output the drawing only. */ let drawCat = function (x, y) { ctx.save(); ctx.translate(x, y); ctx.fillText("ฅ(*ΦωΦ*) ฅ", -20,-5); ctx.restore(); }; let updateCoordinate = function(x_increment,y_increment){ console.log("before:" + cor_x + "/" + cor_y); cor_x += 10 * x_increment; cor_y += 10 * y_increment; console.log("updated:" + cor_x + "/" + cor_y); }; let moveUp = function (){ updateCoordinate(0,-1); console.log(cor_x + "/" + cor_y ); ctx.clearRect(0,0,surface.width,surface.height); drawCat(cor_x,cor_y); }; let moveLeft = function (){ updateCoordinate(-1,0); console.log( cor_x + "/" + cor_y ); ctx.clearRect(0,0,surface.width,surface.height); drawCat(cor_x,cor_y); }; let moveRight = function (){ updateCoordinate(1,0); console.log( cor_x + "/" + cor_y ); ctx.clearRect(0,0,surface.width,surface.height); drawCat(cor_x,cor_y); }; let moveDown = function (){ updateCoordinate(0,1); console.log(cor_x + "/" + cor_y ); ctx.clearRect(0,0,surface.width,surface.height); drawCat(cor_x,cor_y); }; let reset = function(){ cor_x=surface.width/2.0; cor_y=surface.height/2.0; console.log(cor_x + "/" + cor_y ); ctx.clearRect(0,0,surface.width,surface.height); drawCat(cor_x,cor_y); } drawCat(200,200); 

html body:

 <canvas width="400" height="400" id="drawingArea" style="border:solid">cat image</canvas> <p> <input type="button" id="resetBtn" value="reset" onclick="reset();" /> </p> <p> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <input type="button" id="upBtn" value="Up" onclick="moveUp();"/> </p> <p> <input type="button" id="leftBtn" value="Left" onclick="moveLeft();"/> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <input type="button" id="rightBtn" value="Right" onclick="moveRight();"/> </p> <p> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <input type="button" id="downBtn" value="Down" onclick="moveDown();"/> </p> 

By the way, I put console.log () inside updateCoordinate (); and move UP / Down / Right / Left (); functions for tracking x and y coordinates of a cat. Press F12 to track the value.

Answer 1

1) I replaced only all let with var (everything works fine):

 var surface=document.getElementById("drawingArea"); var ctx=surface.getContext("2d"); var cor_x; var cor_y; /** draw a cat * input the coordinates x and y for the center of the cat * does not return, output the drawing only. */ var drawCat = function (x, y) { ctx.save(); ctx.translate(x, y); ctx.fillText("ฅ(*ΦωΦ*) ฅ", -20,-5); ctx.restore(); }; var updateCoordinate = function(x_increment,y_increment){ console.log("before:" + cor_x + "/" + cor_y); cor_x += 10 * x_increment; cor_y += 10 * y_increment; console.log("updated:" + cor_x + "/" + cor_y); }; var moveUp = function (){ updateCoordinate(0,-1); console.log(cor_x + "/" + cor_y ); ctx.clearRect(0,0,surface.width,surface.height); drawCat(cor_x,cor_y); }; var moveLeft = function (){ updateCoordinate(-1,0); console.log( cor_x + "/" + cor_y ); ctx.clearRect(0,0,surface.width,surface.height); drawCat(cor_x,cor_y); }; var moveRight = function (){ updateCoordinate(1,0); console.log( cor_x + "/" + cor_y ); ctx.clearRect(0,0,surface.width,surface.height); drawCat(cor_x,cor_y); }; var moveDown = function (){ updateCoordinate(0,1); console.log(cor_x + "/" + cor_y ); ctx.clearRect(0,0,surface.width,surface.height); drawCat(cor_x,cor_y); }; var reset = function(){ cor_x=surface.width/2.0; cor_y=surface.height/2.0; console.log(cor_x + "/" + cor_y ); ctx.clearRect(0,0,surface.width,surface.height); drawCat(cor_x,cor_y); } drawCat(200,200); 

 <body onload="reset();"> <main> <!-- place your HTML code within the main --> <canvas width="400" height="400" id="drawingArea" style="border:solid">cat image</canvas> <p> <input type="button" id="resetBtn" value="reset" onclick="reset();" /> </p> <p> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <input type="button" id="upBtn" value="Up" onclick="moveUp();"/> </p> <p> <input type="button" id="leftBtn" value="Left" onclick="moveLeft();"/> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <input type="button" id="rightBtn" value="Right" onclick="moveRight();"/> </p> <p> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <input type="button" id="downBtn" value="Down" onclick="moveDown();"/> </p> </main> </body> 

This is a bug with the let variable:

From the console log:

(index): 96 to: 160/390

(index): 99 updated: 160/400

(index): 126 160/280

Inside updateCoordinate: cor_x = 160; cor_y = 400, but inside moveRight (or moveLeft, moveUp, moveDown) cor_x = 160; cor_y = 280