clearRect takes CPU usage to 50%

[Ankhranum]

Hey guys!

 

For some time I have troubles with my CPU usage, just one hour ago, I find out why. For some reason, the clearRect method takes my CPU usage up to 50% while it was 1%. I do not know how or why, but it is becoming ennoying since the other part of the games takes like 1%.

 

This problem occurs always, if you wonder what code I'm using, below is the test example I did the discovery with:

<canvas id="game" width="640" height="480"></canvas><script>canvas = document.getElementById("game");context = canvas.getContext("2d");		function loop() {	context.clearRect(0,0,640,480);	requestAnimationFrame(loop);}		loop();</script>

Thanks in advance!

- Ankh

[rich]

In which browser / device do you see this?

 

I suspect it's a GPU driver issue rather than something generic, as I don't get any problems with it here across many different devices and browsers.

[Ankhranum]

My laptop using the latest Chrome, having a Duo-core from Intel and also a video card from Intel called Mobile Chipsets family. What is your CPU rate? And what computer do you have? I might as well write it down so I can use it for later publications, but if it should be a GPU driver problem, I'll take a look tomorrow for updates if there are any, is there anything else I can do?

[mwatt]

I'm kinda new to the HTML5 programming world but I have read that setting canvas width will automatically clear the canvas.  I have also read that this is considered a hack, but that performance using this method can in some circumstances be better than that achieved via clearRect.

 

You probably already knew this and are just trying to make things work well the correct way.  My apologies for the unecessary advice if so.

[Chris]

Re-Setting the canvas dimensions causes the canvas to be re-initialized by the browser. This is considerably slower than doing a clearRect().

 

Some mobile devices are known to be very slow with clearRect(), but I never heard of a Desktop PC to have issues with it.

 

 

A question to the OP:

Do you really NEED to clear your whole canvas? So far in all my games I made there was no need for having the canvas to remain transparent to see the underlying website through...

[Ankhranum]

I'm kinda new to the HTML5 programming world but I have read that setting canvas width will automatically clear the canvas.  I have also read that this is considered a hack, but that performance using this method can in some circumstances be better than that achieved via clearRect.

 

You probably already knew this and are just trying to make things work well the correct way.  My apologies for the unecessary advice if so.

I never used this hack actually, tried it once but it didn't seemed to work in Chrome. And what you tell now is what I've read more. Still thanks for the advice!

 

 

Re-Setting the canvas dimensions causes the canvas to be re-initialized by the browser. This is considerably slower than doing a clearRect().

 

Some mobile devices are known to be very slow with clearRect(), but I never heard of a Desktop PC to have issues with it.

 

 

A question to the OP:

Do you really NEED to clear your whole canvas? So far in all my games I made there was no need for having the canvas to remain transparent to see the underlying website through...

 

The reason why I'm doing it is because texts, shapes, images and such will just keep pasting and pasting on the canvas. It keeps overlayering for eternity. I might be missing something here though and I really like to not use clearRect all time, but for now it's the only solution that works.

[p01]

Re-Setting the canvas dimensions causes the canvas to be re-initialized by the browser. This is considerably slower than doing a clearRect().

Yes, touching the width or height of a canvas does reset it. Do you have a JSperf page showing the speed difference ? 

In my experience they're virtually the same, with a slight advantage for the reset. A reset simply wipes the raw pixel buffer allocated to the Canvas and resets a few properties regardless of the previous state of the Canvase: transformation matrix, clipping path, globalCompositeOperation, ... OTOH clearRect() is subject to these potentially expensive properties.

 

The reason why I'm doing it is because texts, shapes, images and such will just keep pasting and pasting on the canvas. It keeps overlayering for eternity. I might be missing something here though and I really like to not use clearRect all time, but for now it's the only solution that works.

What about using multiple canvases ? One for the things you modify rarely, and another one for the things that need constant update.

[Ankhranum]

What about using multiple canvases ? One for the things you modify rarely, and another one for the things that need constant update.

 

So, basicly just layering multiple canvases with a z-index? I'll give it a try!

 

 

In which browser / device do you see this?

 

I suspect it's a GPU driver issue rather than something generic, as I don't get any problems with it here across many different devices and browsers.

 

I've done some research yesterday, discovered "about:flags" in Chrome, adjusting some settings reduced my CPU usage from 50% to 15%, a huge difference! Again thanks!

[Serbanghita]

There are lots of performance tests on jsperf, check this: http://jsperf.com/canvas-clearrect-vs-width/5 - use only clearRect() only on the canvas (layer) that is dynamic. Don't repeatedly draw the backgrounds (if you have any).

 

Btw, I'm running tests for a game of mine on a Lenovo G570 which has the same config as you stated and it doesn't know to use the GPU, as far as I'm concerned it uses the CPU only but it rarely has spikes to 17%.

 

I'm also using multiple canvases on top of each other, I also have a drawingQueue to draw only the visible objects.

I cannot use multiple smaller sized clearRect() calls because my objects can interpolate. I use only one clearRect. Also check: http://jsperf.com/single-vs-multiple-clearrect/2

[Ankhranum]

Yes, I adjusted another thing today. Now I'm not only using multiple canvases, but I've made an update function for each of them. Sometimes, you don't touch a thing, but keeping the canvas updating and clearing wont help. Because of this technique, it did even decreased to 1 or 0%! I must thank you guys for your help! I got it now as low as possible. If it's alright, this topic may be marked als 'solved' or something like that.