search

Khan / structured-blocks

MIT License
11 stars 2 forks source link

Support retina canvas #19

Open jbrennan opened 10 years ago

jbrennan commented 10 years ago

On any retina iPad (most iPads made in 2012 and later) the canvas looks pretty, well..blocky! We should use a retina canvas for smoother drawing and fewer jaggies.

jeresig commented 10 years ago

It seems like this might do it: http://www.html5rocks.com/en/tutorials/canvas/hidpi/

We'll want to research this a lot as it'd be really bad if we had to change the curriculum at all! (e.g. change the pixel values of things)

jbrennan commented 10 years ago

Ah yes, hi dpi in browsers is very...interesting :smile: (I think Chrome’s support has improved in the intervening years, thankfully).

So if we used a doubled backing store, all our draw operations would just end up drawing in the top left corner of the canvas. What if we “just” doubled all their values behind the scenes?

jeresig commented 10 years ago

Ha yeah, that's what I'm hoping to avoid - it would be a substantial change to our version of Processing.js. Maybe the scaling process can work...? Not sure!

pamelafox commented 10 years ago

We were at one point thinking of moving to P5.JS, which did add HDPI support: https://github.com/lmccart/p5.js/issues/220

On Wed, Nov 12, 2014 at 8:30 PM, John Resig notifications@github.com wrote:

Ha yeah, that's what I'm hoping to avoid - it would be a substantial change to our version of Processing.js. Maybe the scaling process can work...? Not sure!

— Reply to this email directly or view it on GitHub https://github.com/Khan/structured-blocks/issues/19#issuecomment-62840412 .

jeresig commented 9 years ago

Looking at their code, it looks like they're doing that exact technique I pointed to above (doubling the size of the canvas dimensions, using a .scale() to increase the positioning of everything). I'll look into it, it should be doable!