CODEWITHSUNDEEP
javascripthtml5-canvasfabricjs
masa
masa

Reputation: 2800

Why does FabricJS scale pattern differently on different devices/browsers?

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:

enter image description here

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

enter image description here

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

Upvotes: 1

Views: 619

Answers (1)

AndreaBogazzi
AndreaBogazzi

Reputation: 14731

It s a 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.

Upvotes: 2

Related Questions