HTML5 Canvas Setting Device Pixel Ratio kills performance

Viewed 594

Working on a retina display and setting device pixel ratio as follows, per numerous articles:

/* setting the device pixel ratio to 2 for retina display definitely improves sharpness
 * but kills performance */

_dpr = window.devicePixelRatio || 1;                    

/* to make the device pixel ratio work we have to scale the size of the canvas */
_myCanvas.height = ($("#myDiv").height()) * _dpr;
_myCanvas.width = ($("#myDiv").width()) * _dpr; 

_myCanvas.style.height = ($("#myDiv").height()).toString() + 'px';
_myCanvas.style.width = ($("#myDiv").width()).toString() + 'px';

_myCtx = _myCanvas.getContext('2d');
_myCtx.scale(_dpr, _dpr);

It definitely works: on a retina display the dpr is 2; the display is MUCH sharper/crisper but the performance tanks so as to be unusable. Forcing the dpr back to 1 makes the display slightly blurry but it speeds up significantly.

Any ideas why this is happening?

0 Answers
Related