Fabric.js Zoom Test

by duckywang1

HTML

<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.js"></script>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<canvas id="c" width="600" height="600"></canvas>
<br/>
<button id="zoomin">+</button>
<button id="zoomout">-</button>
<script src="https://cdn.bootcss.com/fabric.js/2.2.2/fabric.js"></script>

CSS

canvas {
    border: 1px solid #999;
}

JavaScript

var canvas,
            canvasOriginalWidth = 800,
            canvasOriginalHeight = 600,
            canvasWidth = 800,
            canvasHeight = 600,
            imgWidth,
            imgHeight,
            bgImage,
            canvasScale = 1,
            photoUrlLandscape = 'https://images8.alphacoders.com/292/292379.jpg',
            photoUrlPortrait = 'https://presspack.rte.ie/wp-content/blogs.dir/2/files/2015/04/AMC_TWD_Maggie_Portraits_4817_V1.jpg';

        $(document).ready(function () {
            canvas = window._canvas = new fabric.Canvas('c');
            setCanvasZoom();

            $('#zoomin').click(function () {
                canvasScale *= 1.25;
                scaleAndPositionImage();
            });
            $('#zoomout').click(function () {
                canvasScale /= 1.25;
                scaleAndPositionImage();
            });


            setCanvasSize({ height: canvasHeight, width: canvasWidth });

            setTimeout(function () {
                setCanvasBackgroundImageUrl(photoUrlLandscape, 0, 0, 1)
            }, 50)
            setTimeout(function () {
                setCanvasBackgroundImageUrl(photoUrlPortrait, 0, 0, 1)
            }, 6000)
        });

        function setCanvasSize(canvasSizeObject) {
            canvas.setWidth(canvasSizeObject.width);
            canvas.setHeight(canvasSizeObject.height);
        }

        function setCanvasZoom() {
            canvasWidth = canvasOriginalWidth * canvasScale;
            canvasHeight = canvasOriginalHeight * canvasScale;

            canvas.setWidth(canvasWidth);
            canvas.setHeight(canvasHeight);
        }

        function setCanvasBackgroundImageUrl(url) {
            if (url && url.length > 0) {
                fabric.Image.fromURL(url, function (img) {
                    bgImage = img;
                    scaleAndPositionImage();
                });
            } else {
                canvas.backgroundImage = 0;
               ...