Cls() optimization

Monkey Targets Forums/HTML5/Cls() optimization

nikoniko

(Posted 2014) [#1]

Look here http://jsperf.com/canvasclear
to compare different methods of canvas clearing.

It is Monkey's cls function:

gxtkGraphics.prototype.Cls=function( r,g,b ){
	if( this.tformed ) this.gc.setTransform( 1,0,0,1,0,0 );
	this.gc.fillStyle="rgb("+(r|0)+","+(g|0)+","+(b|0)+")";
	this.gc.globalAlpha=1;
	this.gc.globalCompositeOperation="source-over";
	this.gc.fillRect( 0,0,this.canvas.width,this.canvas.height );
	this.gc.fillStyle=this.color;
	this.gc.globalAlpha=this.alpha;
	this.gc.globalCompositeOperation=this.blend;
	if( this.tformed ) this.gc.setTransform( this.ix,this.iy,this.jx,this.jy,this.tx,this.ty );
}

It's not fastest realization and even in empty project loading cpu high.
clearRect() is enough fast for desktop browsers (I didn't test Safari), but it is slow for mobile browsers.