fabric canvas resize'r

handy-dandy svg load'r & canvas resize'r

by edwardsharp

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.19/fabric.min.js"></script>
<nav>
  <button id="loadSVG">Load SVG</button>
  -
  <input id="zoom" type="range" min="0.1" max="3" step="0.1" value="0.5">+
  <button id="zoomReset">x</button>
</nav>

<canvas id="c"></canvas>

<div id="tshirt" class="svg" data-url="tshirt.svg">
  <?xml version="1.0" encoding="utf-8"?>
    <svg viewBox="0 0 23000 9900" width="23000" height="9900" xmlns="http://www.w3.org/2000/svg" xmlns:bx="https://boxy-svg.com">
      <g transform="matrix(0.3710770010948181, 0, 0, 0.3710770010948181, 822.2415771484375, 270.1441955566406)">
        <g id="layer1" transform="translate(-21.75 -11.093)">
          <g id="g3219" style="stroke:#000000" transform="matrix(176.860794, 0, 0, 178.263779, -13613.368164, -97704.257812)">
            <path id="path2427" style="fill-rule:evenodd;stroke:#000000;stroke-width:2;fill:#ffffff" d="m67.614 570.42c24.468-13.1 45.356-11.78 66.046-23.06 11.09 2.43 19.35 1.45 26.99-0.27 23.43 10.79 44.03 12.52 66.04 23.59-1.83 11.56-5.86 21.55-12.58 29.61-8.15-4.37-15.87-6.1-23.32-6.29l-0.53 78.62c-32.12 5.99-59.35 3.4-85.96-0.26l-0.26-78.09c-9.369-0.28-16.499 3.19-23.847 6.29-7.067-9.64-10.369-19.81-12.579-30.14z"
            />
            <path id="path3205" style="stroke:#000000;stroke-width:1px;fill:none" d="m133.39 547.62c-0.23 2.32 1.7 12.73 13.89 13.36 11.94 0.62 14.28-11.53 13.89-13.1" />
            <path id="path3207" style="stroke:#000000;stroke-width:1px;fill:none" d="m128.21 550.42c-0.23 2.32 4.58 15.11 18.35 15.46 14.03 0.36 19.78-14.68 19.39-16.25" />
            <path id="path3209" style="stroke:#000000;stroke-width:1px;fill:none" d="m134.52 552.33c8.54 2.24 16.08 1.76 25.32-0.2" />
            <path id="path3213" style="stroke:#000000;stroke-width:1px;fill:none" d="m104.16 558.28c2.58 9.89 6.84 21.49-0.26 35.38" />
            <path id="path3215" style="stroke:#000000;stroke-width:1px;fill:none" d="m190.38 558.48c-2.58 9.89-6.84 21.49 0.26...

CSS

html,
body {
  padding: 0;
  margin: 0;
}

.svg {
  display: none;
}

nav {
  height: 26px;
  padding: 6px;
}

canvas {
  border: 1px solid gray;
  background-image:
    -moz-linear-gradient(45deg, #e6e6e6 25%, transparent 25%), 
    -moz-linear-gradient(-45deg, #e6e6e6 25%, transparent 25%),
    -moz-linear-gradient(45deg, transparent 75%, #e6e6e6 75%),
    -moz-linear-gradient(-45deg, transparent 75%, #e6e6e6 75%);
  background-image:
    -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, #e6e6e6), color-stop(.25, transparent)), 
    -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25, #e6e6e6), color-stop(.25, transparent)),
    -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.75, transparent), color-stop(.75, #e6e6e6)),
    -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.75, transparent), color-stop(.75, #e6e6e6));

  -moz-background-size:16px 16px;
  background-size:16px 16px;
  -webkit-background-size:16px 16px; /* override value for shitty webkit */
  
  background-position:0 0, 8px 0, 8px -8px, 0px 8px;
}

JavaScript

/* PRINT SIZE'R 
 * ------------
 * a little utility to show image scale on real-world
 * itemz, like apparel (t-shirts, hats, etc.) or posters.
 * generally assuming print resolution of 300dpi. 
 *
 * 3dwardsharp
 */

// creates a global "addWheelListener" method (from mdn)
// example: addWheelListener( elem, function( e ) { console.log( e.deltaY ); e.preventDefault(); } );
!function(e,t){function l(t,l,r,d){t[n](o+l,"wheel"==a?r:function(t){!t&&(t=e.event);var l={originalEvent:t,target:t.target||t.srcElement,type:"wheel",deltaMode:"MozMousePixelScroll"==t.type?0:1,deltaX:0,deltaY:0,deltaZ:0,preventDefault:function(){t.preventDefault?t.preventDefault():t.returnValue=!1}};return"mousewheel"==a?(l.deltaY=-.025*t.wheelDelta,t.wheelDeltaX&&(l.deltaX=-.025*t.wheelDeltaX)):l.deltaY=t.deltaY||t.detail,r(l)},d||!1)}var n,a,o="";e.addEventListener?n="addEventListener":(n="attachEvent",o="on"),a="onwheel"in t.createElement("div")?"wheel":void 0!==t.onmousewheel?"mousewheel":"DOMMouseScroll",e.addWheelListener=function(e,t,n){l(e,a,t,n),"DOMMouseScroll"==a&&l(e,"MozMousePixelScroll",t,n)}}(window,document);

var canvas = new fabric.Canvas('c', {
  'selection': false
});


console.log('fabric',fabric);
var canvasHeight, canvasWidth, baseObj;

addWheelListener(document, function(e) {
  // mouse wheel event
  canvas.relativePan(new fabric.Point(-e.deltaX, -e.deltaY));
});

var panning = false;
canvas.on('mouse:up', function(e) {
  panning = false;
});

canvas.on('mouse:down', function(e) {
  panning = true;
});
canvas.on('mouse:move', function(e) {
  if (panning && e && e.e) {
    var delta = new fabric.Point(e.e.movementX, e.e.movementY);
    canvas.relativePan(delta);
  }
});

//canvas.loadFromJSON()

//es6 debounce
function debounce(func, wait = 100) {
  let timeout;
  return function(...args) {
    clearTimeout(timeout);
    timeout = setTimeout(() => {
      func.apply(this, args);
    }, wait);
  };
}

function resizeCanvas(event) {
  canvasHeight =...