CODEWITHSUNDEEP
javascripthtmlhtml5-canvas
Zippy1970
Zippy1970

Reputation: 681

HTML5: Copying one canvas to another very slow

I've written an HTML5 game that uses an invisible canvas ("MAINCanvas") of fixed size to draw each frame on. The contents of this canvas is then copied to another visible canvas that has the same size as the screen, in the requestAnimationFrame callback as follows:

DISPLAYCanvas.context = DISPLAYCanvas.getContext("2d", { alpha: false } );

function requestAnimationFrameCallback() {
  var canvas = MAINCanvas;
  // Some code here
  var destContext = DISPLAYCanvas.context;
  destContext.drawImage( canvas, 0, 0, window.innerWidth, window.innerHeight );
}

I keep track how often the requestAnimationFrame callback is called per second since that gives me my Game's FPS.

When I compile the game with Cordova and run the game, I get about 20FPS. But if I remove this line from the callback:

destContext.drawImage( canvas, 0, 0, window.innerWidth, window.innerHeight );

I get 60 FPS. So apparently, the drawImage is what's causing the tremendous slowdown... Is there any way to speed this up?

Upvotes: 0

Views: 262

Answers (1)

Michael B.
Michael B.

Reputation: 145

You should draw using the context that you received from GetContext() and then just store it for the drawing loop to use. Avoid messing with the DOM inside any loops, do all assignments upfront.

var destContext = DISPLAYCanvas.getContext("2d", { alpha: false } );
var w = window.innerWidth;
var h = window.innerHeight;
var canvas = MAINCanvas;

function requestAnimationFrameCallback() {
  // Some code here
  destContext.drawImage( canvas, 0, 0, w, h );
}

Upvotes: 0

Related Questions