Resizing issue about hidpi-canvas-polyfill HOT 5 CLOSED

Seems like on resize you'll want to trigger a redraw, if you re-call .getContext('2d') it should adjust the dimensions accordingly.

Though specifically this is definitely outside the scope of the tool.

from hidpi-canvas-polyfill.

Doesn't seem to have any effect :/

/* previous code... */

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

ctx = $('#thing').get(0).getContext("2d");

from hidpi-canvas-polyfill.

What about this?

  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());


  // now actually redraw stuff
  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();

Though you probably need to clear the canvas before redrawing.

from hidpi-canvas-polyfill.

I isolated it a bit. This is resulting in a quarter circle on a 2x device but normal on a 1x device.

<canvas id="thing" height="300" width="300"></canvas>
<script>
    document.getElementById('thing').setAttribute('width',100);
    document.getElementById('thing').setAttribute('height',100);

    var ctx = document.getElementById('thing').getContext("2d");
    ctx.beginPath();
    ctx.arc(ctx.canvas.width/2, ctx.canvas.height/2, 
        ctx.canvas.width/4, 0, 2* Math.PI, false);
    ctx.strokeStyle = "red";
    ctx.lineWidth = ctx.canvas.width/6;
    ctx.stroke();
</script>

Off topic; but I actually think browsers should handle all of this.

from hidpi-canvas-polyfill.

Sooooo, I believe what is happening is that you're using the canvas.height and canvas.width to calculate the inputs here.

In the polyfill, I modify these values behind the scenes so they are actually double what you expect, and the canvas is sized via css back to it's expected size, which produces the retina sharpness.

For example if you replace ctx.canvas.width and ctx.canvas.height with 300, everything works as expected.

If you need to base your calculations on the canvas height/width, you can use the function I provide in the README to get the pixel ratio so you can scale these appropriately as well

from hidpi-canvas-polyfill.