สอบถามเรื่องการเขียน scrollbar ให้กับตัว canvas ค่ะ

//// canvas
 <div id="canvas"  style="overflow:hidden;position:relative;width:500px;height:400px;border:#999999 1px solid;overflow: scroll" >
							
</div>

 <script type="text/javascript" src="../Jquery/jquery-1.6.4.js"></script> 
            <script src="../bootstarp/js/jsDraw2D.js" type="text/javascript">
</script> 
 <script language="javascript"  type="text/javascript">
var canvasDiv=document.getElementById("canvas");
var gr=new jsGraphics(canvasDiv);
setPen(true);
	
var points=[];

var ie=false;
if(document.all)
	ie=true;
if (!ie)
{
 //canvasDiv.captureEvents(Event.MOUSEMOVE);
 //canvasDiv.captureEvents(Event.CLICK);
}
canvasDiv.onmousemove = getMouseXY;
canvasDiv.onclick = drawPoint;
var mouseX = 1;
var mouseY = 1;
var num = 0;
//Get mouse position
function getMouseXY(e)
{
  if (ie) 
	{
    mouseX = event.clientX + document.body.parentElement.scrollLeft;
    mouseY = event.clientY + document.body.parentElement.scrollTop;
  } else { 
    mouseX = e.pageX;
    mouseY = e.pageY;
  }  
  if (mouseX < 1){mouseX = 1}
  if (mouseY < 1){mouseY = 1}  
  
  mouseX =mouseX - canvasDiv.offsetLeft;
  mouseY =mouseY - canvasDiv.offsetTop;
  return true;
}
function setPen(noAlert)
{
	gr.drawImage('doraemon.jpg', new jsPoint(0,0),800,500);
		
	if(!noAlert)
	{
		if(points.length==0 )
		{
			alert("Please click at any location on the blank canvas at left side to plot the points!");
			
		}
		else if(points.length==5)
		{
			alert("mark จุดครบแล้ว");
			
			
		}
	}	
	return true;
}



function drawPoint()
{

	
	    
		
		
		gr.clear();
		
		gr.drawImage('doraemon.jpg', new jsPoint(0,0),800,500);
		points.push(new jsPoint(mouseX-2,mouseY-2));
		
			for(var i=0;i<points.length;i++)
	{
		gr.fillCircle(new jsColor("red"),new jsPoint(points[i].x,points[i].y),2,2);
		
	}
	    showPoints();

	
	
	
}


///////////////////// function แสดงจุด
function showPoints()
{	
	var txt=document.getElementById("txt");
	txt.innerHTML="";
		
	for(var i=0;i<points.length;i++)
	{
	txt.innerHTML=txt.innerHTML + "Point "+i+" : (" + points[i].x + "," + points[i].y + ")\n";
	}

	
}

//////////////// function ลบ
function myDeleteFunction() {
 
gr.clear();
points.pop();


		gr.drawImage('doraemon.jpg', new jsPoint(0,0),800,500);
			for(var i=0;i<points.length;i++)
	{
		gr.fillCircle(new jsColor("red"),new jsPoint(points[i].x,points[i].y),2,2);
		
	}
	    showPoints();
showPoints();






}