title: HTML 5 - how to zoom canvas background image
body: <p>I am a beginner in HTML 5,</p>
  
  <p>I have written a code for canvas zoom but I dont want to zoom actual canvas but the background image of canvas like in the <a href="http://www.customink.com/lab" rel="nofollow">http://www.customink.com/lab</a></p>
  
  <p>following is the code which I have written :</p>
  
  <pre><code>var canvas = new fabric.Canvas('canvas');
  
  canvas.setBackgroundImage('images/1front.png', function() {
  
      canvas.backgroundImageStretch = true;
      canvas.renderAll();
  });
  
  var canvasScale = 1;
  var SCALE_FACTOR = 1.2;
  function zoomIn() {
      // TODO limit the max canvas zoom in
  
      canvasScale = canvasScale * SCALE_FACTOR;
  
      canvas.setHeight(canvas.getHeight() * SCALE_FACTOR);
      canvas.setWidth(canvas.getWidth() * SCALE_FACTOR);
  
      var objects = canvas.getObjects();
      for (var i in objects) {
          var scaleX = objects[i].scaleX;
          var scaleY = objects[i].scaleY;
          var left = objects[i].left;
          var top = objects[i].top;
  
          var tempScaleX = scaleX * SCALE_FACTOR;
          var tempScaleY = scaleY * SCALE_FACTOR;
          var tempLeft = left * SCALE_FACTOR;
          var tempTop = top * SCALE_FACTOR;
  
          objects[i].scaleX = tempScaleX;
          objects[i].scaleY = tempScaleY;
          objects[i].left = tempLeft;
          objects[i].top = tempTop;
  
          objects[i].setCoords();
      }
  
      canvas.renderAll();
  }
  
  // Zoom Out
  function zoomOut() {
      // TODO limit max cavas zoom out
  
      canvasScale = canvasScale / SCALE_FACTOR;
  
      canvas.setHeight(canvas.getHeight() * (1 / SCALE_FACTOR));
      canvas.setWidth(canvas.getWidth() * (1 / SCALE_FACTOR));
  
      var objects = canvas.getObjects();
      for (var i in objects) {
          var scaleX = objects[i].scaleX;
          var scaleY = objects[i].scaleY;
          var left = objects[i].left;
          var top = objects[i].top;
  
          var tempScaleX = scaleX * (1 / SCALE_FACTOR);
          var tempScaleY = scaleY * (1 / SCALE_FACTOR);
          var tempLeft = left * (1 / SCALE_FACTOR);
          var tempTop = top * (1 / SCALE_FACTOR);
  
          objects[i].scaleX = tempScaleX;
          objects[i].scaleY = tempScaleY;
          objects[i].left = tempLeft;
          objects[i].top = tempTop;
  
          objects[i].setCoords();
      }
  
      canvas.renderAll();        
  }
  </code></pre>