Working with a javascript-based hybrid mobile app, I had problems with blurry text being drawn in a canvas. I found suggestions like this, which fixed things on Android and iOs. But not in Windows phone (our app uses IE10).
Adding a debug div and this code to the app:
var PIXEL_RATIO = (function () {
var ctx = document.createElement("canvas").getContext("2d"),
dpr = window.devicePixelRatio || 1,
bsr = ctx.msBackingStorePixelRatio ||
ctx.webkitBackingStorePixelRatio ||
ctx.mozBackingStorePixelRatio ||
ctx.oBackingStorePixelRatio ||
ctx.backingStorePixelRatio || 1;
return dpr / bsr;
}());
$('#debugg').append(" PR=" + PIXEL_RATIO);
var ctx = document.createElement("canvas").getContext("2d");
$('#debugg').append(" msr=" + ctx.msBackingStorePixelRatio);
Outputs "PR=1 msr=undefined", which indicates that the msBackingStorePixelRatio property is not defined on canvas contexts in IE10. I had a look in IE10 on a desktop PC, and using the developer tools I can't seem to find it there either - the same applies to window.devicePixelRatio.
What to do? I tried changing the default for dpr to 2 above, which makes it look nice on Windows Phone, and it works on an Android phone and an iPhone here. But can I depend on window.devicePixelRatio aways being set for non-MS platforms, or 2 being a generally appropriate value? Is there some other way to find a ratio to use when rescaling to high definition canvas drawing?
