CODEWITHSUNDEEP
javascripthtmlcanvas
Gamsh
Gamsh

Reputation: 545

Draw line with scrollable canvas window

I am new one for canvas.I want to know how to draw a line with scrollable canvas window.my expectation is canvas window fit the screen and if line went to out side of the view port then the canvas window is scrollable until to view the end of the line.i try this code.any idea for this problem.Thank you.

<html>
<head>
<head>
<body>
<canvas id="myCanvas" style="border:1px solid #d3d3d3;float: left;" > Your browser does not support the HTML5 canvas tag.</canvas>
<script>
function draw() {
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.canvas.width = window.innerWidth;
ctx.canvas.height = window.innerHeight;
ctx.beginPath();
ctx.moveTo(100,100);
ctx.lineTo(1500,1000);
ctx.stroke();
}
draw();
</script>
</body>
</html>

Upvotes: 0

Views: 439

Answers (1)

markE
markE

Reputation: 105015

You can have the browser add scrollbar(s) by wrapping a taller canvas inside a shorter div and setting the shorter div's overflow:scroll.

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

ctx.beginPath();
ctx.moveTo(100,100);
ctx.lineTo(200,1000);
ctx.stroke();
body{ background-color: ivory; }
#viewport{width:320px;height:150px;border:1px solid blue;overflow:scroll;}
#canvas{border:1px solid red; }
<div id=viewport>
  <canvas id="canvas" width=300 height=1500></canvas>
</div>

Upvotes: 1

Related Questions