4
On a canvas, I added 10 small squares, but I also want to be able to change the position of these squares continuously, and that change be drawn on the screen whenever I do (I don’t necessarily need an animation, just understand how I can update the canvas whenever I want). How can I do that?
0
Use the context.clearRect to clean up the canvas or just the square. And then redesign.
0
To erase you use the context.clearRect(width,height);, to draw you use the context.drawImage(imagem,x,y);.
Browser other questions tagged javascript html5 canvas
You are not signed in. Login or sign up in order to post.
I do not know if I understood the doubt well, but you need to redesign everything to each frame. Once drawn an object, there is no way to move it.
– bfavaretto
@bfavaretto ...Both you can copy immutable elements (like a background) to another canvas that you can use as a buffer - no need to re-generate all elements again. (
context.drawImage(oldCanvas, 0, 0);)– OnoSendai
@Onosendai This has a lot of performance advantage compared to calling a function that generates a layer?
– bfavaretto
@bfavaretto depends on the complexity and number of static objects - my experience is that this technique can be a hand on the wheel
– OnoSendai
Cool, I’ll test when I need it. @Onosendai
– bfavaretto