Increased Sharpness through devicePixelRatio

[alexanderwernerrose]

Hi Tim,

great work on this one, the wheel is fantastic!

One thing for you or other stumbling upon this: the wheel was a bit blurry for me, but this did the trick: https://stackoverflow.com/a/58345223

It resulted in changing

resize() {

        // Get the smallest dimension of `canvasContainer`:
        const [w, h] = [this.canvasContainer.clientWidth, this.canvasContainer.clientHeight];

        // Calc the size that the wheel needs to be to fit in it's container:
        const minSize = Math.min(w, h);
        const wheelSize = {
            w: minSize - (minSize * this.offset.w),
            h: minSize - (minSize * this.offset.h),
        };
        const scale = Math.min(w / wheelSize.w, h / wheelSize.h);
###
        this.size = Math.max(wheelSize.w * scale, wheelSize.h * scale) * window.devicePixelRatio;
###
        // Resize canvas element:
###
        this.canvas.width = w * window.devicePixelRatio;
        this.canvas.height = h * window.devicePixelRatio;
        this.canvas.style.width = w + 'px';
        this.canvas.style.height = h + 'px';
###
        // Re-calculate the center of the wheel:
        this.center = {
###
            x: w * window.devicePixelRatio / 2 + (w * window.devicePixelRatio * this.offset.w),
            y: h * window.devicePixelRatio / 2 + (h * window.devicePixelRatio * this.offset.h),
###
        };
        ...

[alexmahan]

@alexanderwernerrose Thanks for this! Just wondering if this is the only code you needed to update in wheel.js? Adding window.devicePixelRatio makes it a lot sharper, but it breaks the dragging/spinning of the wheel, wondering if this also needs to be added in other places?

[CrazyTim]

@alexmahan yher its not quite right. I have a PR in the pipeline to put this in.

[alexanderwernerrose]

Yes, I must admit that I don't use the drag functionality in my case, that's why I didn't look at it in that regard.

[CrazyTim]

@alexanderwernerrose thanks for raising this issue. Its a good idea to do this and the code you posted above is helpful. Lets leave the issue open until the PR is merged.