JSFiddle - React, Tailwind, and code Playground

by mukkaram waheed

HTML

<div id="image-container">
    <!-- <img src="http://www.placekitten.com/100/100/" alt=""/> -->
    <canvas id="myCanvas"  class="ball" width="200" height="100" style="border:1px solid #000000;">
</canvas>
</div>
<div id="image-controls">
     <input id="zoom-in" value="+" type="submit" />
     <input id="zoom-out" value="-" type="submit" />
</div>

CSS

.ball {
  width: 100px;
  height: 100px;
  position: absolute;
  left: 30px;
  top: 40px;
}

JavaScript

var img = $('#image-container img');
var zoomWidthIncrement = img.width() * 1 / 3;
var zoomHeightIncrement = img.height() * 1 / 3;

$("#zoom-in").click(function(e) {
    img.css({
        width: img.width() + zoomWidthIncrement,
        //height: img.height() + zoomHeightIncrement
    });
    e.preventDefault();
});

$("#zoom-out").click(function(e) {
    img.css({
        width: img.width(function(i, w) {
            return w - zoomWidthIncrement;
        }),
      //  height: img.height(function(i, w) {
       //     return w - zoomWidthIncrement;
       // })
    });
    e.preventDefault();
});