Image Resize / Scale

by Eugene Vilder

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.0.1/fabric.min.js"></script>
<img id="image" />
<canvas id="paper" width="400" height="400" style="border:1px solid #ccc"></canvas>
<button id="zoomIn">[+]</button>
<button id="zoomOut">[-]</button>

SCSS

#paper {
  border: solid 1px red;
}

JavaScript

const canvas = new fabric.Canvas('paper');
const canvasOriginalSize = {
	width: 600,
  height: 600
};
const step = .1;
const page = new fabric.Rect({
    left: 50,
    top: 50,
    width: 300,
    height: 300
});

let zoomFactor = 1;

canvas.add(page);
canvas.renderAll();

function setPattern(scaleFactor){
	const imgSrc = ['https://picsum.photos/', page.get('width') * scaleFactor,'/',  page.get('height') * scaleFactor].join('');

$('#image').attr('src', imgSrc);

fabric.Image.fromURL(imgSrc, function(img) {
    const patternSourceCanvas = new fabric.StaticCanvas();
    img.scaleToWidth(300);
    img.scaleToHeight(300);
 //patternSourceCanvas.enableRetinaScaling = true;
  // patternSourceCanvas.imageSmoothingEnabled = true;
   //patternSourceCanvas.backgroundVpt = false;

   patternSourceCanvas.setBackgroundColor('red', patternSourceCanvas.renderAll.bind(patternSourceCanvas));
    patternSourceCanvas.setBackgroundImage(img, patternSourceCanvas.renderAll.bind(patternSourceCanvas));

    const pattern = new fabric.Pattern({
      source: function () {
        patternSourceCanvas.setDimensions({
          width: 300,
          height: 300
        });
        patternSourceCanvas.renderAll();
        return patternSourceCanvas.getElement();
      },
      repeat: 'no-repeat'
    });

    page.setPatternFill(pattern);
    page.canvas.renderAll();
  }.bind(this),{crossOrigin: 'Anonymous'});
        
}

zoom();

function zoom(scaleFactor = 1) {

//	canvas.setHeight(canvas.getHeight() * scaleFactor);
  // canvas.setWidth(canvas.getWidth() * scaleFactor);
//	canvas.setViewportTransform([scaleFactor, 0, 0, scaleFactor, 0,0]);
//canvas.setZoom(scaleFactor);

const vpt = canvas.viewportTransform;
        vpt[0] = scaleFactor;
        vpt[3] = scaleFactor;
//        vpt[4] = canvasShifter.left;
  //      vpt[5] = canvasShifter.top;
canvas.setViewportTransform(vpt);
	setPattern(scaleFactor);
  canvas.renderAll();
}
        
$('#zoomIn').on('click', function(){
	zoomFactor +=...