jondavidjohn / hidpi-canvas-polyfill Goto Github PK

In IOS 10, the issues #17 turned into a bug.

When you open your demo page on an iPad using Chrome or Safari there's no difference between the 'Before' and 'After.

Android + Chrome looks awesome, though.

Hi

Thank you for your great polyfill.
I do have a small problem with it: isPointInPath sometimes returns a wrong value - true instead of false, and false instead of true.
My application draws a dial which can be turned around. After adding your script, the dial sometimes doesn't turn, even though the touch point is on it.
Do you have an idea what could be the cause of this? I can give more details if needed, just don't want to overwhelm straight out.

Thank you

We're supposed to pull the repo and run Grunt ourselves?

I think it will save much time for most situations.

Thanks for the library! Would be great if we could do the following:

import "hidpi-canvas"

const canvas = document.createElement('canvas') // will render in high resolution
// ...

Which would work with any asset bundler, such as webpack.

The benefit from this is that you don't need bower, as you can just keep your dependencies up-to-date with npm.

I noticed (actually, i got report from other people, i didn't even noticed, since my rMBP is hooked up to external monitor on work) that when you resize canvas and continue to draw on it, it gets all messy on retina displays

i was using code like this:

this.canvasElementObject.height(height);
this.canvasElementObject.width(width);
this.canvasElementObject.attr('height', height);
this.canvasElementObject.attr('width', width);

but after that the image became blurry, and i need to re-fetch the context with .getContext('2d') method

After that i added two more methods to my AMD class, which acts as a light wrapper around canvas object, this has fixed my issue, but i was wandering is there something we can do automatically, or is there some better way you think we should use in this kind of situations?

/**
 * ----------------------------------------------------------
 * this is needed for resize and HiDPI stuff
 * ----------------------------------------------------------
 */
this.reInitCtx = function() {
    this.ctx = this.canvasElement.getContext('2d');
};

/**
 * ----------------------------------------------------------
 * ----------------------------------------------------------
 * @param {Number} width
 * @param {Number} height
 */
this.safeResizeCanvas = function(width, height) {

    this.canvasElementObject.height(height);
    this.canvasElementObject.width(width);
    this.canvasElementObject.attr('height', height);
    this.canvasElementObject.attr('width', width);

    this.reInitCtx();


};

FYI, canvasElement is a reference to DOM element, and canvasElementObject is jQery object.

Any feedback is appreciated, thanks!

It's not entirely uncommon to have getContext() called more than once on a canvas, and this shouldn't keep changing the scale of it.

The effect is good on android devices ,but fps down to 10+, how to deal with that?

On my Retina display Mac, when I do canvas.getContext('2d'), width and height is doubled. But the problem is, when I do it again, the canvas size is doubled again.

See it in action : http://jsfiddle.net/e8sark6v/2/

I checked the browser I have and saw following call is always true:
document.getElementById('canvas').getContext('2d') === document.getElementById('canvas').getContext('2d').

In the spec, following is written for 2d contexts:

Return the same object as was return the last time the method was invoked with this same argument.

So, am I completely missing something big, or is this really a bug?

I looked for canvas best practices if it is not a good practice to call getContext('2d') multiple times. Found not that convincing results. In the end, performance would not be affected.

Current implementation always wraps original methods even when pixelRatio is 1. It slows rendering (~2.5 times in my case)

When for instance you have an arc and want to Stroke it.
ctx.beginPath();
ctx.arc(100, 100, 300, 0.85 * Math.PI, 2.15 * Math.PI, false);
ctx.strokeStyle = "red";
ctx.lineWidth = 20;
ctx.stroke();

This lineWidth stroke property stays at 20, which results in a thinner circle border.

Any idea's how to solve this?

I am not sure, but lines also look thinner in general (so with lineTos), I am not sure if this lineWidth property is being touched at all.

(Beautiful work), regards

When this polyfill (very helpful by the way) is in place, if a draw operation is done to a canvas that is currently hidden via Angular's ng-show directive, the canvas element will end up with a width/height of 0.
I believe this is the case any time drawing on an element with display:none applied. Then when you remove display:none, the element has been reduced to 0 size, so you won't see it.
Obviously, it's generally pointless to draw on a hidden canvas, but this issue does not present when this polyfill is not applied, so I guess it'd be considered a bug.

when I use your polyfill to drawImage, But it still blurry in retina screen? How to solve it ? thank you!
http://www.html5rocks.com/en/tutorials/canvas/hidpi/

add context.scale(ratio, ratio); when ratio > 1 ?

I'm working on something which can optionally be used with this polyfill. However, I need to make some code act differently if the polyfill has been used.

Is there a way to tell if that's happened? I guess I could check CanvasRenderingContext2D.prototype.stroke.toString() but that's pretty hacky.

How do you resize the display size of the canvas after this polyfill has initialized?

I intend to make my canvas responsive to the window width via a resize listener. How can I leverage this polyfill to size everything properly again?

Any idea how to handle resizing properly?

For instance (and also with responsive design) I have to manually (in JS) re-set the width attribute of a canvas based on the width of its DOM container. This seems to break up the polyfill.

<div style="width:100%">
    <canvas id="thing" height="300" width="300"></canvas>
</div>

<script>
  var ctx = $('#thing').get(0).getContext("2d");
  ctx.beginPath();
  ctx.arc(150, 150, 100, 0, 2* Math.PI, false);
  ctx.strokeStyle = "red";
  ctx.lineWidth = 40; 
  ctx.stroke();

  //causing the trouble
  $('#thing').attr('width',$('#thing').parent().width());
</script>

can you add a switch to control enable/disable hipdi canvas polyfill function(It's enable default when import this library). Sometime i don't want the polyfill function.

Hi, i have tested your solution but it seem not work on iphone 4s , 5 , 5s
i have a game wich is runing good on desktop see picture 1 (http://sharkbite.club/cigario/)
but when you lunch it from iphone browser (both native iphone browser or chrome) i got like picture 2
i try to apply your solution but nothing

With enabled, only first fillText works, second yields small text
http://i.imgur.com/6nFO9zk.png

When I disable it, it works just as expected:
http://i.imgur.com/skYiTBV.png

Pease advise, the extension is really nice and useful!

everything works, but I'm getting this:

Deprecated attempt to access property 'webkitBackingStorePixelRatio' on a non-CanvasRenderingContext2D object.