Override devicePixelRatio scaling

[Innders]

User Story

You are drawing over a 4K image to make some annotations. The canvas container size is less than 4K, let's say 1080px. Once the drawing has finished you want to export the full image at 4K with annotations included. The canvas must be scaled up to 4K to match the intrinsic size of the image.

The result is you end up with blurry lines.

Solution

window.devicePixelRatio is taken into account to scale up the canvas to ensure it stays sharp. Could this same method be used to scale the canvas by any factor?

It would just require a new configuration argument called dpr.

If you want the annotation to have 4 times the resolution that you are actually drawing at (in the window) then you could pass dpr=4.

Do you think this would work?

[Innders]

I don't think the change would be too big. Here is an example plus 4 other lines need changing.

  static #setupCanvas(selector, config) {
    // previous code...

    // NEW DPI CONFIG USED HERE
    canvas.width = (config.width || canvas.width) * (config.dpr || window.devicePixelRatio);
    canvas.height = (config.height || canvas.height) * (config.dpr || window.devicePixelRatio);
    canvas.style.touchAction = 'none';

    return canvas;
  }

[jakubfiala]

Hey @Innders - sorry I'm only just getting to this, it's been a busy few weeks. I think this is a great idea and I'd love to add it in the next minor version. The only change I'd make to your proposal is to call the config option resolution - that way it's clear it doesn't have to do with the device.

[jakubfiala]

and thank you for the suggestion!

[Innders]

I totally agree with the option name, I realized dpr was unclear as soon as I started using it.

I tried this out on a fork and it works really well.

[jakubfiala]

@Innders the resolution config option has now been added in v4.5.0, which is now published. Thanks for your contribution!