Защо FabricJS мащаба модел различно на различни устройства / браузъри? - javascript, html5-платно, fabricjs

виждам цигулка: Опитвам се да изобразя фоново изображение на полигон FabricJS, но по някаква причина мащабът на шаблона е различен на различни устройства / браузъри без очевидна причина.

Ето кода:

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");

Това виждам на работния си компютър Chrome:

... и това, което виждам на (Samsung) таблет Chrome:

Как мога да поправя кода, така че и двата модела да изглеждат еднакво, т.е. като първия?

Отговори:

Това е страничен ефект на подкрепата на ретината.

Когато инициализирате платното за Модела, моля, преминете като опция:

enableRetinaScaling: false

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

Това ще избегне тъкани, които се опитват да подобрят платното два пъти.