How to limit the view of a larger HTML “i

Question

I've got a 5500 pxl wide panorama img (with usemap='#imagemap') on which I've overlain a canvas. These are parented inside a div.

Everything works as expected; the img view is restricted to the div, and can be scrolled. But the complete (wiiiide) canvas is visible in the browser window.

In addition, the canvas doesn't scroll with the div/img. I have to move it in an onscroll().

Edit: Here's a fiddle http://jsfiddle.net/91y2upam/1/ showing the canvas (outlined in green) escaping from the div.

Can a canvas be kept "inside" its parent div, with restricted view, and scrolled?

If so, how so?

The CSS:

#divPano {
  width:  100%;
  overflow: auto;
  }
#cvsPano {
  pointer-events: none;       /* make the canvas transparent to the mouse - needed since canvas is position infront of image */
  position: absolute;
  }

and HTML:

<div name="divPano" id="divPano">
  <canvas id='cvsPano'></canvas> 
  <img  name='imgPano'  id='imgPano' usemap='#mapPano'  src='Pano/Pano0H500s.jpg' >
  </div>

and the overlay JS (called from onload()):

function cvsInit(cvs, img) {
  var x, y,  w, h;

    // get it's position and width+height
  x = img.offsetLeft;
  y = img.offsetTop;
  w = img.width;
  h = img.height;

    // place cvsPano in front of the image
  cvs.style.zIndex = 1;
  cvs.parentNode.style.zIndex = 2;    //  <- this didn't work :-(

    // position it over the image
  cvs.style.left = x+'px';
  cvs.style.top = y+'px';

    // make same size as the image
  cvs.setAttribute('width', w+'px');
  cvs.setAttribute('height', h+'px');

    // get it's context
  hdc = cvs.getContext('2d');

    // set the 'default' values for the colour/width of fill/stroke operations
  hdc.strokeStyle = '#007700';
  hdc.lineWidth = 1;

  }    //  function cvsInit()

Answer 1

Make the parent position:relative and the oversized child canvas position:absolute.

1. Add scrollbars with overflow:scroll or

2. Pan programmatically with the parent overflow:hidden and moving the canvas with left:-100px.

Pan using scrollbars

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");

var img=new Image();
img.onload=function(){
  ctx.drawImage(img,0,0,img.width,img.height,0,0,canvas.width,canvas.height);
}
img.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/canvas%20compositing.png";

body{ background-color: ivory; padding:50px; }
canvas{position:absolute; border:1px solid red;}
#parent{position:relative; overflow:scroll; width:300px; height:300px; border:2px solid blue; }

<div id=parent>
  <canvas id="canvas" width=800 height=500></canvas>
</div>

Pan programatically

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");

$myslider=$('#myslider');
$myslider.attr({min:-200,max:0}).val(0);
$myslider.on('input change',function(){
  $('#canvas').css('left',parseInt($(this).val()));
});


var img=new Image();
img.onload=function(){
  ctx.drawImage(img,0,0,img.width,img.height,0,0,canvas.width,canvas.height);
}
img.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/canvas%20compositing.png";

body{ background-color: ivory; padding:50px; }
canvas{position:absolute; left:0px; border:1px solid red;}
#parent{position:relative; overflow:hidden; width:300px; height:300px; border:2px solid blue; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input id=myslider type=range>
<br>
<div id=parent>
  <canvas id="canvas" width=800 height=500></canvas>
</div>

Answer 2

In the css, try changing the property overflow to something else like:

overflow: scroll;

Maybe that way it will scroll with the page.