Prev Demo
HTML5
>
Canvas Scroll Bar
Next Demo
Write code here
J
|
B
|
A
<!DOCTYPE html> <html> <head> <title>Canvas scroll bar</title> </head> <body> <h2 style="color:black"><i>Canvas scroll bar</i></h2> <style> html, body { width:100%; height:100%; margin:0; overflow:hidden } #parent { width:400px; height:400px; border:1px solid #000; overflow:auto; } .canvas { width:auto; height:200%; } </style> <div id="parent"> <canvas id="canvas" class="canvas" width="2500" height="3500"></canvas> </div> <script> var canvas = document.getElementById("canvas"); var context = canvas.getContext('2d'); i = 10; context.lineWidth = 1; context.strokeStyle = 'pink'; for (; i < canvas.height; i += 100) { context.moveTo(i, 0); context.lineTo(0, i); } context.stroke(); </script> </body> </html>
Note: We DO NOT save your trial code in our database.
Output
