html5 canvas: clearRect() not working inside function

Question

Not sure why my clearRect() is not working inside my 'reset'. It however works in my 'up' function. (My 'up' function is used to clear the canvas and then draw + translate the image up 10 pixels)

Assignment is to create an object on canvas that is able to be moved around through the user's button clicks. One of the buttons have to be a reset button which clears the canvas and redraws the image at the center of the canvas.

Here is my code below. There are supposed to be 4 functions for the movements but I only included the 'up' movement function here for a general idea:

var surface = document.getElementById("drawingSurface");
var ctx = surface.getContext("2d");

var reset = function () {
alert("Testing"); // <--- This works
ctx.clearRect(0, 0, 499, 499); // <--- But this is not working

ctx.beginPath();
ctx.strokeRect(200, 200, 100, 100);//Face
ctx.fillRect(220, 225, 15, 15);//Left eye
ctx.fillRect(265, 225, 15, 15);//Right eye
ctx.fillRect(245, 250, 10, 10); // Nose
ctx.fillRect(210, 185, 20, 15); // Left ear
ctx.fillRect(270, 185, 20, 15); // Left ear
ctx.closePath();
};

var up = function () {
ctx.clearRect(0, 0, 499, 499);

ctx.beginPath();
ctx.translate(0, -10);
ctx.strokeRect(200, 200, 100, 100);//Face
ctx.fillRect(220, 225, 15, 15);//Left eye
ctx.fillRect(265, 225, 15, 15);//Right eye
ctx.fillRect(245, 250, 10, 10); // Nose
ctx.fillRect(210, 185, 20, 15); // Left ear
ctx.fillRect(270, 185, 20, 15); // Left ear
ctx.closePath();
};

Here is my HTML:

<canvas id="drawingSurface" width="500" height="500" style="border: 1px    
solid black; background-color: #FFF;">Cat</canvas>
<br>
<button onclick="reset();">RESET</button>
<button onclick="up();">MOVE UP</button>
<button onclick="left();">MOVE LEFT</button>
<button onclick="right();">MOVE RIGHT</button>
<button onclick="down();">MOVE DOWN</button>

Answer 1

I believe the issue is that the translation applied in up is persisting. So the clear is firing, but then immediately redrawing the same image (try commenting out the draw functions in reset ).

To reset the translation, you can use ctx.setTransform(1, 0, 0, 1, 0, 0); , placing it somewhere before the drawing calls in reset .

Answer 2

您的代码确实起作用，只是reset函数在up（）放置它的最后位置重绘了该表面。

Answer 3

Along the same lines of what everyone else is saying. You are redefining the coordinate system on your canvas each time you call translate. The function is firing but it is not doing what you expect because the coordinates have been moved. A way to keep track of that is to increment a variable outside the function everytime you shift the y coordinates and then add it back to when you "reset" the image.

 var surface = document.getElementById("drawingSurface"); var ctx = surface.getContext("2d"); var yShift = 0; function reset() { ctx.clearRect(0, 0, 499, 499); // <--- But this is not working ctx.beginPath(); ctx.strokeRect(200, 200+yShift, 100, 100);//Face ctx.fillRect(220, 225+yShift, 15, 15);//Left eye ctx.fillRect(265, 225+yShift, 15, 15);//Right eye ctx.fillRect(245, 250+yShift, 10, 10); // Nose ctx.fillRect(210, 185+yShift, 20, 15); // Left ear ctx.fillRect(270, 185+yShift, 20, 15); // Left ear ctx.closePath(); }; var up = function () { ctx.clearRect(0, 0, 499, 499); ctx.beginPath(); ctx.translate(0,-10); yShift += 10; ctx.strokeRect(200, 200, 100, 100);//Face ctx.fillRect(220, 225, 15, 15);//Left eye ctx.fillRect(265, 225, 15, 15);//Right eye ctx.fillRect(245, 250, 10, 10); // Nose ctx.fillRect(210, 185, 20, 15); // Left ear ctx.fillRect(270, 185, 20, 15); // Left ear ctx.closePath(); }; 

 <canvas id="drawingSurface" width="500" height="500" style="border: 1px solid black; background-color: #FFF;">Cat</canvas> <br> <button onclick="reset();">RESET</button> <button onclick="up();">MOVE UP</button> <button onclick="left();">MOVE LEFT</button> <button onclick="right();">MOVE RIGHT</button> <button onclick="down();">MOVE DOWN</button>