title: Mouse Wheel Zooming
body: <p>so i'm working on a canvas that you can only drag a image from side to side and use the mouse wheel to re size the image by zooming in and out on it here is the code i have so far please feel free to ask any more details. I'm trying to find a way that's compact to do this and require minimum code.</p>
  
  <pre><code>&lt;!DOCTYPE HTML&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;style&gt;
        body {
          margin: 0px;
          padding: 0px;
        }
      &lt;/style&gt;
      &lt;script src="kinetic-v5.1.0.min.js" type="text/javascript"&gt;&lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;div id="container"&gt;&lt;/div&gt;
  
      &lt;script type="text/javascript"&gt;
        function drawImage(imageObj) {
          var stage = new Kinetic.Stage({
            container: "container",
            width: 1800,
            height: 800
          });
          var layer = new Kinetic.Layer();
  
          // image
          var image1 = new Kinetic.Image({
            image: imageObj,
            x: stage.getWidth() / 2 - 896 / 1,
            y: stage.getHeight() / 2 - 255 / 2,
            width: 200,
            height: 157,
            draggable: true,
            dragBoundFunc: function (pos) {
              if (pos.x &lt; this.minX) { }
              this.minX = pos.x;
              return {
                x: pos.x,
                y: this.getAbsolutePosition().y
              }
            }
          });
  
  
          // add cursor styling
          image1.on('mouseover', function() {
            document.body.style.cursor = 'pointer';
          });
          image1.on('mouseout', function() {
            document.body.style.cursor = 'default';
          });
  
          layer.add(image1);
          stage.add(layer);
        }
        var imageObj = new Image();
        imageObj.onload = function() {
          drawImage(this);
        };
        imageObj.src = 'image1.png';
  
      &lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>