Forums » Code » How to improve rendering for Google Chrome on Retina Macbook Pro

I noticed that when scaling my canvas Google Chrome does not render as 'crisply' as Safari on the Retina Macbook Pro. See the screenshots linked in the comment of this gist https://gist.github.com/wordofchristian/897f9bfa0dd366aff0b6

I created a small plugin that implements the solution discussed in this blog post.
http://www.html5rocks.com/en/tutorials/canvas/hidpi/

Here is the plugin.
https://gist.github.com/wordofchristian/5898328

I'm new to ImpactJS so I'm not entirely sure if there is a better way to handle this. I thought the creator had already found a solution to the Retina Mac problem.

If there is some built in configuration option that I missed pleas let me know.

How are you scaling the canvas? I know that if you are setting the height/width of the canvas using css the browser will anti-alias the content making everything all blurry. Instead you should just the the height and width using the canvas attributes and not do any sizing in css. Then you should scale in impact when you initialize the game. Impact does it's own nearest neighbor scaling which should keep everything pixelated and blocky which is usually desired for an impact game.

The first link shows exactly what I'm doing. It's essentially the basic ImpactJS demo with an additional test image. There's no CSS scaling happening. I set the impact scale to 2 and that's it. It looks perfectly crisp in safari, but looks anti-aliased in chrome.

It seems that safari is automatically compensating for this issue by using the backingStoreRatio. Essentially it is creating a 2x canvas and scaling down after rendering.

What my plugin does is emulate this effect in chrome, or any browser with backingStoreRatio that doesn't match the devicePixelRatio.

So... for the demo example in Google Chrome on Retina you have these values:


devicePixelRatio: 2
backingStoreRatio: 1
impactjs scale factor: 2
initial canvas dimensions: 600x200
scaled game/canvas dimensions: 1200x400

Given this it will scale up the canvas width/height and artwork by 2x for the impactjs scale factor. Then it will scale it up by another 2x for the discrepancy in the two pixel ratios. Then it will use CSS to scale it down 2x to the original impactjs scale factor. This creates a nice crisp looking game.

On safari, all it does is scale up the 2x and does nothing else.

In both cases the game has the "apparent" dimensions of 1200x400 but on google chrome the game is actually being rendered at 2400x800 (4x).