Pattern Image Scale

by Kris

HTML

<script src="https://rawgithub.com/kangax/fabric.js/master/dist/fabric.js"></script>
<canvas id="c" width="600" height="600"></canvas>

CSS

canvas {
    border: 1px solid #999;
}

JavaScript

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

var leftStickPoints = [{x: 0, y: 0},{x: 86, y: 86},{x: 86, y: 441},{x: 0, y: 528}];

var patternURL = 'https://img.bslong.cn/ef1689a2-f016-41a9-995f-2d58e16c4789.jpeg';
var padding = 0;
fabric.Image.fromURL(patternURL, function(img) {

    img.scaleToWidth(200);

    var patternSourceCanvas = new fabric.StaticCanvas();
    patternSourceCanvas.add(img);
        console.log(img.getScaledHeight())
    var pattern = new fabric.Pattern({
      source: function() {
        console.log(img.getScaledWidth())
        patternSourceCanvas.setDimensions({
          width: img.getScaledWidth(),
          height: img.getScaledHeight()
        });
        return patternSourceCanvas.getElement();
      },
    	repeat: 'no-repeat',
      offsetX: 0,
      offsetY: 0
    });
		canvas.add(new fabric.Polygon([
      {x: 185, y: 0},
      {x: 250, y: 100},
      {x: 385, y: 170},
      {x: 0, y: 245} ], {
        left: 0,
        top: 200,
        angle: -30,
        fill: pattern,
        objectCaching: false
      }));
    canvas.renderAll();
 },{
          crossOrigin: 'anonymous'
});