Clipping region for split-screen causing insufferable lagg

[theweirdn8]

Okay guys,

 

So i have been experimenting with getting my views/split screen system going and I have been using the clip();, restore(); and save(); functions to go from view to view on the same canvas, but there is huge amount of lagg happening for just 2 views happening at once.

 

I am using the request frame animation methods as well, and before this I get 60 fps and then afterwards I get like 20 fps without even rendering tiles yet...

 

 

Here is a snippet of my code:

renderToArea.fillStyle = this.bgColor;

renderToArea.fillRect(0, 0, game.SCREEN_WIDTH, game.SCREEN_HEIGHT);

var viewInUse = IS_NULL;

for (gTemp = 0; gTemp < this.levelView.length; gTemp++)

{

viewInUse = this.levelView[ gTemp];

if( viewInUse.isVisible)

{

renderToArea.rect(viewInUse.renderRect.get_x(), viewInUse.renderRect.get_y(), viewInUse.renderRect.get_width(), viewInUse.renderRect.get_height() );

renderToArea.stroke();

renderToArea.clip();

renderToArea.beginPath();

//render code

renderToArea.closePath();

renderToArea.restore();

 

 

}

}

renderToArea.restore(); 

for (gTemp = 0; gTemp < this.levelView.length; gTemp++)

{ 

viewInUse = this.levelView[ gTemp];

renderToArea.font = 'bold 16pt Calibri';

renderToArea.textAlign = 'right';

renderToArea.fillStyle = '#000';

renderToArea.fillText("["+gTemp+"] "+viewInUse.renderRect.get_x()+","+viewInUse.renderRect.get_y()+","+ viewInUse.renderRect.get_width()+","+ viewInUse.renderRect.get_height(), game.SCREEN_WIDTH-32,48*(2+gTemp ) );

}

 

 

I hope I can solve this, otherwise, I may have to find a more manual way of adding multiple displays in a single canvas...