FabricJS - Pattern & Zoom

by Eugene Vilder

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.2.3/fabric.js"></script>
<canvas id="paper" width="800" height="400" style="border:1px solid #ccc"></canvas>
<button id='zoomIn'>[+]</button>
<button id='zoomOut'>[-]</button>
Canvas zoom: <span id="zoomDisplay"></span>

JavaScript

let zoom = 1;
  const step = .1;
  
  const initialImageSize = {
  	width: 666.72,
    height: 324
  };
  //https://ddp-dev.presscentric.com/api/public/images/6X6jobMYexN8vFE4o1YJZP/666.72/324
  
(function() {
	const canvas = new fabric.Canvas('paper');
  //fabric.Object.prototype.transparentCorners = false;

  var padding = 0;
  const rect = new fabric.Rect({
    left: 0,
    top: 0,
    angle: 0,
    width: initialImageSize.width, 
    height: initialImageSize.height,
    fill: 'red',
    objectCaching: false,
    stroke: 1
  });
      
  canvas.add(rect); 
  drawPattern();
  
  function drawPattern(){
    const url = [
      "https://ddp-dev.presscentric.com/api/public/images/6X6jobMYexN8vFE4o1YJZP/",
      initialImageSize.width * zoom,
      "/",
      initialImageSize.height * zoom
    ].join('');
    
   	console.log('Url: ', url);  
      
    fabric.Image.fromURL(url, function(img) {
      //img.scaleToWidth(initialImageSize.width);
      var patternSourceCanvas = new fabric.StaticCanvas(null, {
        enableRetinaScaling: false,
        imageSmoothingEnabled: true
      });
      patternSourceCanvas.setZoom(1 / zoom);
      patternSourceCanvas.add(img);
      patternSourceCanvas.renderAll();
      var pattern = new fabric.Pattern({
        source: function() {
          patternSourceCanvas.setDimensions({
            width: img.getScaledWidth() ,
            height: img.getScaledHeight()
          });
          patternSourceCanvas.renderAll();
          return patternSourceCanvas.getElement();
        },
        repeat: 'no-repeat'
      });
//img.getScaledWidth()
      rect.set({
        fill: pattern
      });

      rect.canvas.renderAll();
    });
  }
//============================================
$("#zoomIn").click(function(){
	zoom += step;
	setZoom(zoom);
});

$("#zoomOut").click(function(){
	zoom -= step;
	setZoom(zoom);
});

function setZoom(zoom){
/* 		const vpt = [canvas.viewportTransform];
		    vpt[0] = zoom;
		    vpt[3] = zoom;
		   ...