Mouse Wheel Zooming

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.

1. body { margin: 0px; padding: 0px; }

   <script type="text/javascript">
     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 < 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';
   
   </script>   </body> </html>