I can make simple animations with canvas. But i I have to clean every frame before painting and it makes painting slower (fps ~ 15) I've tried to use 2 canvases, but there is no success. Do you have any idea how i can increase fps? Can i use the buffering? and how?
-
2Can you post some code? Using clearRect once every frame shouldnt affect performance that much.TJHeuvel– TJHeuvel2011-06-28 11:29:35 +00:00Commented Jun 28, 2011 at 11:29
-
Are you drawing a a lot of images? can you post some code?Declan Cook– Declan Cook2011-06-28 11:34:14 +00:00Commented Jun 28, 2011 at 11:34
-
by 2 canvas's do you mean pseudo double buffering?Mouseroot– Mouseroot2014-02-25 19:31:00 +00:00Commented Feb 25, 2014 at 19:31
Add a comment
|
4 Answers
If you are drawing lots of images you can increase the performance greatly by drawing the images onto a canvas element and storing that instead of the image. Drawing a canvas element onto another canvas element is a lot faster than drawing an image.
Comments
It depends largely on how you're drawing your animations. Manipulating the canvas pixel data array can be very slow as array traversal in JS is slower than native GPU-accelerated rendering. It can help to isolate only the parts of the canvas that need to be redrawn, rather than clearing the whole thing, but you may already know that!
Comments
No, you will really need to clean it evey frame. But, as pointed out by TJHeuvel, the simple act of clearing the canvas every frame shouldn't affect the performance. The problem is probably in your logic to update the content varibles, possibly looping through objects that don't take any action in the time you update the canvas drawing.
Comments
I have experienced this problem before too as I have a 1920x1200 screen and thus the number of pixels that the canvas needs to clear is massive. It's only really a problem if your browser is using software rendering as a GPU would have no problem with that.
One thing you can do (as mentioned by others before me) is to only clear parts of the canvas.
Another thing you can do is make sure that the user has hardware acceleration turned on for their browser. On Windows, you can tell the user to enable hardware acceleration in about:flags in Chrome. IE9 has it on by default and does a really good job. I think Firefox also has Direct2D acceleration on by default.
For cases like Chrome where users have to manually set it what you could do is measure the framerate while your app is running and if it is really slow show them some text to tell them to make sure they have hardware acceleration enabled for their browser.
