From 7b212d58ab8f9392b6c1f7b680d013d01a7d312c Mon Sep 17 00:00:00 2001 From: Dawid Karabin Date: Wed, 21 Sep 2016 10:23:08 +0200 Subject: [PATCH] Fix accessing webkitBackingStorePixelRatio of context on iOS10 On iOS 10 webkitBackingStorePixelRatio can be accessed only by using instance of CanvasRenderingContext2D. Using Object.create(prototype) in that case doesn't work so the only way to access that property is by getting context 2d from canvas element. --- .gitignore | 1 + dist/hidpi-canvas.js | 18 ++++++++++-------- dist/hidpi-canvas.min.js | 2 +- src/CanvasRenderingContext2D.js | 18 ++++++++++-------- 4 files changed, 22 insertions(+), 17 deletions(-) diff --git a/.gitignore b/.gitignore index 07e6e47..727118b 100644 --- a/.gitignore +++ b/.gitignore @@ -1 +1,2 @@ /node_modules +npm-debug.log \ No newline at end of file diff --git a/dist/hidpi-canvas.js b/dist/hidpi-canvas.js index 2f94a38..7f92def 100644 --- a/dist/hidpi-canvas.js +++ b/dist/hidpi-canvas.js @@ -8,16 +8,18 @@ */ (function(prototype) { - var pixelRatio = (function(context) { - var backingStore = context.backingStorePixelRatio || - context.webkitBackingStorePixelRatio || - context.mozBackingStorePixelRatio || - context.msBackingStorePixelRatio || - context.oBackingStorePixelRatio || - context.backingStorePixelRatio || 1; + var pixelRatio = (function() { + var canvas = document.createElement('canvas'), + context = canvas.getContext('2d'), + backingStore = context.backingStorePixelRatio || + context.webkitBackingStorePixelRatio || + context.mozBackingStorePixelRatio || + context.msBackingStorePixelRatio || + context.oBackingStorePixelRatio || + context.backingStorePixelRatio || 1; return (window.devicePixelRatio || 1) / backingStore; - })(prototype), + })(), forEach = function(obj, func) { for (var p in obj) { diff --git a/dist/hidpi-canvas.min.js b/dist/hidpi-canvas.min.js index 687149e..286a23a 100644 --- a/dist/hidpi-canvas.min.js +++ b/dist/hidpi-canvas.min.js @@ -6,4 +6,4 @@ * Issue Tracker: https://github.com/jondavidjohn/hidpi-canvas-polyfill/issues * License: Apache 2.0 */ -!function(a){var b=function(a){var b=a.backingStorePixelRatio||a.webkitBackingStorePixelRatio||a.mozBackingStorePixelRatio||a.msBackingStorePixelRatio||a.oBackingStorePixelRatio||a.backingStorePixelRatio||1;return(window.devicePixelRatio||1)/b}(a),c=function(a,b){for(var c in a)a.hasOwnProperty(c)&&b(a[c],c)},d={fillRect:"all",clearRect:"all",strokeRect:"all",moveTo:"all",lineTo:"all",arc:[0,1,2],arcTo:"all",bezierCurveTo:"all",isPointinPath:"all",isPointinStroke:"all",quadraticCurveTo:"all",rect:"all",translate:"all",createRadialGradient:"all",createLinearGradient:"all"};1!==b&&(c(d,function(c,d){a[d]=function(a){return function(){var d,e,f=Array.prototype.slice.call(arguments);if("all"===c)f=f.map(function(a){return a*b});else if(Array.isArray(c))for(d=0,e=c.length;e>d;d++)f[c[d]]*=b;return a.apply(this,f)}}(a[d])}),a.stroke=function(a){return function(){this.lineWidth*=b,a.apply(this,arguments),this.lineWidth/=b}}(a.stroke),a.fillText=function(a){return function(){var c=Array.prototype.slice.call(arguments);c[1]*=b,c[2]*=b,this.font=this.font.replace(/(\d+)(px|em|rem|pt)/g,function(a,c,d){return c*b+d}),a.apply(this,c),this.font=this.font.replace(/(\d+)(px|em|rem|pt)/g,function(a,c,d){return c/b+d})}}(a.fillText),a.strokeText=function(a){return function(){var c=Array.prototype.slice.call(arguments);c[1]*=b,c[2]*=b,this.font=this.font.replace(/(\d+)(px|em|rem|pt)/g,function(a,c,d){return c*b+d}),a.apply(this,c),this.font=this.font.replace(/(\d+)(px|em|rem|pt)/g,function(a,c,d){return c/b+d})}}(a.strokeText))}(CanvasRenderingContext2D.prototype),function(a){a.getContext=function(a){return function(b){var c,d,e=a.call(this,b);return"2d"===b&&(c=e.backingStorePixelRatio||e.webkitBackingStorePixelRatio||e.mozBackingStorePixelRatio||e.msBackingStorePixelRatio||e.oBackingStorePixelRatio||e.backingStorePixelRatio||1,d=(window.devicePixelRatio||1)/c,d>1&&(this.style.height=this.height+"px",this.style.width=this.width+"px",this.width*=d,this.height*=d)),e}}(a.getContext)}(HTMLCanvasElement.prototype); \ No newline at end of file +!function(a){var b=function(){var a=document.createElement("canvas"),b=a.getContext("2d"),c=b.backingStorePixelRatio||b.webkitBackingStorePixelRatio||b.mozBackingStorePixelRatio||b.msBackingStorePixelRatio||b.oBackingStorePixelRatio||b.backingStorePixelRatio||1;return(window.devicePixelRatio||1)/c}(),c=function(a,b){for(var c in a)a.hasOwnProperty(c)&&b(a[c],c)},d={fillRect:"all",clearRect:"all",strokeRect:"all",moveTo:"all",lineTo:"all",arc:[0,1,2],arcTo:"all",bezierCurveTo:"all",isPointinPath:"all",isPointinStroke:"all",quadraticCurveTo:"all",rect:"all",translate:"all",createRadialGradient:"all",createLinearGradient:"all"};1!==b&&(c(d,function(c,d){a[d]=function(a){return function(){var d,e,f=Array.prototype.slice.call(arguments);if("all"===c)f=f.map(function(a){return a*b});else if(Array.isArray(c))for(d=0,e=c.length;e>d;d++)f[c[d]]*=b;return a.apply(this,f)}}(a[d])}),a.stroke=function(a){return function(){this.lineWidth*=b,a.apply(this,arguments),this.lineWidth/=b}}(a.stroke),a.fillText=function(a){return function(){var c=Array.prototype.slice.call(arguments);c[1]*=b,c[2]*=b,this.font=this.font.replace(/(\d+)(px|em|rem|pt)/g,function(a,c,d){return c*b+d}),a.apply(this,c),this.font=this.font.replace(/(\d+)(px|em|rem|pt)/g,function(a,c,d){return c/b+d})}}(a.fillText),a.strokeText=function(a){return function(){var c=Array.prototype.slice.call(arguments);c[1]*=b,c[2]*=b,this.font=this.font.replace(/(\d+)(px|em|rem|pt)/g,function(a,c,d){return c*b+d}),a.apply(this,c),this.font=this.font.replace(/(\d+)(px|em|rem|pt)/g,function(a,c,d){return c/b+d})}}(a.strokeText))}(CanvasRenderingContext2D.prototype),function(a){a.getContext=function(a){return function(b){var c,d,e=a.call(this,b);return"2d"===b&&(c=e.backingStorePixelRatio||e.webkitBackingStorePixelRatio||e.mozBackingStorePixelRatio||e.msBackingStorePixelRatio||e.oBackingStorePixelRatio||e.backingStorePixelRatio||1,d=(window.devicePixelRatio||1)/c,d>1&&(this.style.height=this.height+"px",this.style.width=this.width+"px",this.width*=d,this.height*=d)),e}}(a.getContext)}(HTMLCanvasElement.prototype); \ No newline at end of file diff --git a/src/CanvasRenderingContext2D.js b/src/CanvasRenderingContext2D.js index ac077c1..8399e97 100644 --- a/src/CanvasRenderingContext2D.js +++ b/src/CanvasRenderingContext2D.js @@ -1,15 +1,17 @@ (function(prototype) { - var pixelRatio = (function(context) { - var backingStore = context.backingStorePixelRatio || - context.webkitBackingStorePixelRatio || - context.mozBackingStorePixelRatio || - context.msBackingStorePixelRatio || - context.oBackingStorePixelRatio || - context.backingStorePixelRatio || 1; + var pixelRatio = (function() { + var canvas = document.createElement('canvas'), + context = canvas.getContext('2d'), + backingStore = context.backingStorePixelRatio || + context.webkitBackingStorePixelRatio || + context.mozBackingStorePixelRatio || + context.msBackingStorePixelRatio || + context.oBackingStorePixelRatio || + context.backingStorePixelRatio || 1; return (window.devicePixelRatio || 1) / backingStore; - })(prototype), + })(), forEach = function(obj, func) { for (var p in obj) {