How to have scroll when zooming canvas stage

Question

I am having a designer tool developed in canvas using KineticJs library. Everything working fine except that when I press Zoom in/out and it sets the zoom on stage to 2x then I would need scrollbars both vertical and horizontal. I have tried giving css overflow to the stage itself and for container as well but does not work. How could I manage doing it?

Answer 1

You are on the right track...

Make the stage-canvas larger than the div containing the stage. Then set overflow:hidden on the container.

If you want to allow panning by the scrollbars then your stage must be larger than the containing viewport or you will "run out of canvas".

var stage = new Kinetic.Stage({
  container: 'container',
  width: 740,
  height: 463
});
var layer = new Kinetic.Layer();
stage.add(layer);

var image = new Image();
image.onload = function () {

  var kImg = new Kinetic.Image({
    image: image,
    id: 99,
    x: 0,
    y: 0,
    width: 740,
    height: 463,
    draggable: false
  });
  layer.add(kImg);
  layer.draw();
}
image.src = "http://www.mrwallpaper.com/wallpapers/Colorful-New-York-City.jpg";

#wrapper {
    overflow:scroll;
    width:300px;
    height:350px;
    border:2px solid blue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/kineticjs/5.2.0/kinetic.min.js"></script>
<div id="wrapper">
    <div id="container"></div>
</div>