Skip to content Skip to sidebar Skip to footer
Home / Canvas / Html / Javascript

Canvas Not Showing Scrollbars Although The Content Does Not Fit The Page

Post a Comment
I am showing a canvas in the page, the resolution of what's appearing in the canvas is high that it doesn't all fit ont he page but the scrollbars are not appearing making it impos

Solution 1:

You can always add a jqueryUI scrollbar and scroll through your tall canvas.

Here is code and a Fiddle: http://jsfiddle.net/m1erickson/a9KDB/

<!doctype html><html><head><linktype="text/css"media="all"href="css/reset.css" /><!-- reset css --><scriptsrc="http://code.jquery.com/jquery-1.9.1.js"></script><scriptsrc="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script><style>body{ background-color: ivory; }
div, canvas {
    position:absolute;
}
.wrapper {
    top:10px;
    left:10px;
    width: 300px;
    height: 300px;
    border: 2px solid black;
    margin:30px02;
    overflow: hidden;
    background-color:green;
}
.vertical-scroll {
    left:320px;
    top:10px;
    border: 1px solid green;
    width: 20px;
    height: 300px;
}
.vertical-scrolldiv.bar {
    left:0px;
    top:0px;
    width: 20px;
    background-color: blue;
    height: 20px;
}
#mycanvas {
    left:0px;
    top:0px;
}

</style><script>
    $(function(){

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

        var wrapper;
        var canvasHeight;
        var vScrollHeight;
        var canvasWrapperHeight=300;

        $(".bar").draggable({
            containment: "parent"
        });

        $(".bar").on("drag", function (event, ui) {
            var ctop=(-ui.position.top * canvasHeight / canvasWrapperHeight);
            canvas.style.top = ctop + "px"
        });

        var img=newImage();
        img.onload=function(){
          canvas.width=this.width;
          canvas.height=this.height;
          canvasHeight=this.height;
          vbarHeight=canvasWrapperHeight*canvasWrapperHeight/canvasHeight;
          document.getElementById("vbar").style.height=vbarHeight+"px";
          ctx.drawImage(this,260,0,300,this.height,0,0,300,this.height);
        }
        img.src="http://sciencedude.blog.ocregister.com/files/2008/02/zot1-copy.jpg";

    }); // end $(function(){});</script></head><body><divclass="wrapper"id="wrap1"><canvasid="mycanvas"width="300px"height="300px" /></div><divclass="vertical-scroll"id="vscroll"><divclass="bar"id="vbar"></div></div></body></html>

Post a Comment for "Canvas Not Showing Scrollbars Although The Content Does Not Fit The Page"