---

Search posts under HTML5:

---

Canvas in Scroll bar in HTML5

How to bring the Canvas under scrollable element in HTML5?

Canvas Scroll bar

It is used to scroll the texts which are presnt in the canvas elements 

<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>

• In the above code snippet we have defined how to create the scroll bar using canvas HTML5
• We have given the style sheet to the element canvas, body, html , parent elements of the canvas 
• In the first step we are having the canvas as id as canvas , context as assigned to the canvas element
• We are having the i value as 10 with the line width as 1 color as pink.
• In the nextline we are having the for condition to check the i value is lessthan the canvas height it increments with the value 100 , which moves to the move (i, 0), context.lineTo(0, i); which moves from the (0,i);