为什么FabricJS在不同的设备/浏览器上缩放模式会有所不同？

Question

See Fiddle : I am trying to render a background image on a FabricJS polygon, but for some reason the scale of the pattern is different on different devices / browsers for no obvious reason.

Here is the code:

HTML:

<canvas id="tcanvas" width="200" height="200" />

JavaScript:

function testPattern(id) {
  var url = 'https://dummyimage.com/200x200/aff/000',
      tCanvas = new fabric.Canvas(id);

  new fabric.Image.fromURL(url, function(img) {
     var tPoints = [{
       x: 0,
       y: 0
     },
     {
       x: 0,
       y: 200
     },
     {
       x: 200,
       y: 200
     },
     {
       x: 200,
       y: 0
     }
   ];

   var tPatternWidth = 200;
   var tPatternHeight = 200;

   var tImgXScale = tPatternWidth / img.width;
   var tImgYScale = tPatternHeight / img.height;

   img.set({
     left: 0,
     top: 0,
     scaleX: tImgXScale,
     scaleY: tImgYScale
   });

   var tPatternSourceCanvas = new fabric.StaticCanvas();
   tPatternSourceCanvas.add(img);
   tPatternSourceCanvas.renderAll();

   var tPattern = new fabric.Pattern({
     offsetX: 0,
     offsetY: 0,
     source: function() {
        tPatternSourceCanvas.setDimensions({
          width: tPatternWidth,
          height: tPatternHeight
        });
        tPatternSourceCanvas.renderAll();
        return tPatternSourceCanvas.getElement();
      },
      repeat: 'no-repeat'
    });

    var tImgPoly = new fabric.Polygon(tPoints, {
      left: 100,
      top: 100,
      originX: 'center',
      originY: 'center',
      fill: tPattern,
      objectCaching: false,
      selectable: false,
      stroke: 'red',
      strokeWidth: 1
    });

    tCanvas.add(tImgPoly);
    tCanvas.renderAll();
  });
}

testPattern('tcanvas');

This is what I see on my desktop Chrome:

... and this what I see on a (Samsung) tablet Chrome:

How can I fix the code so that the both patterns look the same, ie, like the first one?

Answer 1

It sa retina support side effect.

When initializing the canvas for the Pattern, please pass as option:

enableRetinaScaling: false

var tPatternSourceCanvas = new fabric.StaticCanvas(null, {enableRetinaScaling: false});

This will avoid fabric trying to enhance the canvas twice.