scrollfunction for canvas if canvas too big

Question

I am using the visualisation arborjs and I am trying to implement the zoom-function. This isn't included in the visualisation itself so I had to try some different approches.

I can't use the html5 canvasfunction .scale because with this the positions given by the visualisation don't match the real positions anymore. For the moment I just increase the height and width of the canvas to zoom in. This doesn't give any problems with the positioningproblem, but I can't scroll in the canvas.

The only problem that I have to solve is the scrollfunction to make this work. So my question is: can I add scrollbars to the canvas when the canvas becomes too big. Initially the canvas has width 100% and height 100%, so no scrollbars are needed, but when I enlarge this I need those scrollbars.

I tried the css-style overflow:scroll for both the canvas and the surrounding div, but no results.

Here is the relevant code:

HTML:

<div class="explore_area">
    <canvas class="explore_area" id="viewport">
    </canvas>   
</div>

javascript:

zoom: function(){
            var canvas = document.getElementById("viewport");
            var ctx = canvas.getContext('2d');
            sys.screenSize((canvas.width*1.5), (canvas.height*1.5));
        }

css:

div.explore_area {
    position:relative;
    width:100%;
    height:600px;
    overflow:hidden;
}

canvas.explore_area{
    float:left;
    height:550px;
    width:100%;
}

Answer 1

Setting the width and height of canvas using css is not a good idea. To achieve what you required you should not give width and height of canvas in css. Even if you change the dimension css will reset it.

so first you need to give dimension like this

<canvas class="explore_area" id="viewport" width="400" height="300">

css for container

div.explore_area {
    position:relative;
    width:400px;
    height:300px;
    overflow:auto;
}

see the demo here : http://jsfiddle.net/diode/sHbKD/22/ ( not using arborjs)