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

Question

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

I have no idea why it behaves in this way. can anyone help?

The program is on jsfiddle, you can test it out

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

JavaScript code is hereunder:

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 to track the value of the x and y coordinates of the cat. Press F12 to track the value.

Answer 1

1) I replaced only all let to var (everything is working good):

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>

It is bug with let variable:

From console log:

(index):96 before:160/390

(index):99 updated:160/400

(index):126 160/280

Within updateCoordinate: cor_x = 160; cor_y = 400 BUT within moveRight (or moveLeft, moveUp, moveDown) cor_x = 160; cor_y = 280