soulwire / sketch.js

Cross-Platform JavaScript Creative Coding Framework
MIT License
4.09k stars 430 forks source link

Adds Retina Support #19

Closed olexpono closed 11 years ago

olexpono commented 11 years ago

Hey Justin,

This pull request introduces a new option called "retina", which is off by default, and doesn't change behavior for HTML and WebGL sketches.

For canvas sketches, flipping the retina flag to true will detect the devicePixelRatio and scale the canvas to actually produce the high-DPI image. The net result is that all of your animation is done in CSS pixels, looks right on regular displays, and shows up crisp on Retina MBP's /iPhone4+ / iPad 3+ and so on.

I do think it's a good idea to turn this off by default - fullscreen retina is a LOT of pixels, and fullscreen is on by default. This is good for smaller sketches.

The two cases in which this might change behavior would be if you reset using a custom matrix transform such as context.setTransform(1, 0, 0, 1, 0, 0); or if you rely on canvas.width for responsive measurements. Those working with custom transform matrices can easily replicate the retina-compatible effect, and those relying on canvas.width can instead use canvas.style.width to get the CSS pixel width.

If you'd like to minify the JS yourself, I can drop the second commit. Let me know if you have any other concenrs.

olexpono commented 11 years ago

@soulwire -- Could you glance at this? Or are you rewriting sketch?

soulwire commented 11 years ago

Sorry! Yes, I'll merge this in tonight. Thanks for the update and apologies for the delay. I am indeed rewriting Sketch, but this feature should be there now anyway. I appreciate your work and patience :)