CODEWITHSUNDEEP
canvasfabricjs
Entity
Entity

Reputation: 8202

Calling "toDataURL" on mobile returns an image 4x larger than on desktop

So I'm using fabric for a small project, and it needs to be usable on mobile as well.

My canvas is 500x500 pixels, and when I call "toDataURL" on desktop it works just fine. However when I test on mobile, I'm getting a 2000x2000 pixel image in response. Here is an isolated example:

var canvas = new fabric.Canvas('canvas');

canvas.setDimensions({
    width: 500,
    height: 500
});

setTimeout(function() {
    var data = canvas.toDataURL('png');
    var image = new Image();
    image.onload = function() {
        alert(image.width);
    };
    image.src = data;
}, 3000);

https://jsfiddle.net/ycsp5gfx/

After 3 seconds, a message should pop up with the dimension of the image. On Chrome/Firefox on desktop I always get 500 (which is correct). On Chrome/Firefox on mobile (Samsung Galaxy S7 Edge) I always get 2000 for some reason.

What am I doing wrong? How can I get mobile to behave normally?

EDIT: I tested on an iPhone 6's Safari and there I get 1000...

Upvotes: 2

Views: 921

Answers (1)

Entity
Entity

Reputation: 8202

So glad to discover this is a feature and not a bug! ;)

Just needed to disable retina scaling:

canvas = new fabric.Canvas('canvas', { enableRetinaScaling: false });

Alternatively, you could set the device/pixel ratio to 1. Here's how it's being set in the fabric source:

fabric.devicePixelRatio = window.devicePixelRatio || 
                          window.webkitDevicePixelRatio || 
                          window.mozDevicePixelRatio || 
                          1;

Upvotes: 4

Related Questions