How do i refactor the code so the rectangle can move without increasing???

Question

https://code.sololearn.com/WMr2aM5hLPSl/?ref=app

Answer 1

You have to redraw the entire rectangle each time the user pushes the button.

Answer 2

Move your ctx.clearRect into your drawcircle function and change the parameters like this.

ctx.clearRect(startX,startY, canvasWidth, canvasHeight);

function drawcircle() {
ctx.clearRect(0,0,200,200);
ctx.beginPath();
ctx.arc(100, 140, 30, 56, Math.PI * 2, true);
ctx.fillStyle = "red";
ctx.fill();
ctx.closePath();
}

Answer 3

Thks Anthony Joshua it's working perfectly 👌👍 buh pls 🙏 i need some explanation why does the clearRect needed to be in draw circle fuction??

Answer 4

Okay, the proper way to use clearRect is to call it before you redraw to your canvas.
In an animation for example.
The order would be.

randomFunction = function() {
Clear canvas
Update (anything thats changing)
Draw
}
Its not the best example but straight forward to the point.
Every time the function is called it clears, updates, and redraws with the new parameters.

Answer 5

How do I do that