scrollbar in canvas

Door Keesje van Poelgeest op 10-04-2015 16:21

896 views

Ik heb een scrollbar in een canvas alleen het vraag is wanneer ik rectangles erbij toevoeg extra scrollt hij niet mee



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>test</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

  


<div class="scrollbar" id="ex3"  width="100px"  height="100px"  overflow="auto" >
    <canvas id="NodeList" style="border:2px solid black;" width="200" height="2000">
	
</canvas>

</div>





    <script>

var c = document.getElementById("NodeList");
var ctx = c.getContext("2d");
ctx.rect(20, 20, 150, 100);
ctx.rect(20, 220, 150, 100);
ctx.rect(20, 420, 150, 100);
ctx.rect(20, 620, 150, 100);
ctx.rect(20, 820, 150, 100);
ctx.rect(20, 1020, 150, 100);
ctx.rect(20, 1220, 150, 100);
ctx.rect(20, 1420, 150, 100);
ctx.rect(20, 1620, 150, 100);
ctx.rect(20, 1820, 150, 100);
ctx.rect(20, 2020, 150, 100);
ctx.rect(20, 2220, 150, 100);
ctx.rect(20, 2420, 150, 100);
ctx.rect(20, 2620, 150, 100);

ctx.stroke();

</script> 








</body>
</html>

en de css



 html, body {
            height: 100%;
            overflow: auto;
          }
b {

margin-left: 75px;

}

#container {
                margin-left:auto;
                margin-right:auto;
                text-align:center;
                }

a img {
                border:none;
}

.scrollbar{
width:220px;
height:1000px;
background-color:B3B3B3;
overflow-y: auto;
overflow-x: hidden;
float:left;
// line-height: 0px;


}






#Display {

margin-left:250px;


}              

#properties {

margin-left: 28px;
margin-top: 40px;
}

weet iemand misschien hoe ik dit kan aanpakken ?