HTML Canvas with Scrollbar

HTML canvas with scrollbar

Specify the total width of the canvas then wrap it in a div. Set the div to overflow: scroll and give that the 500px width. You should then have scrollbars allowing you to scroll and see the hidden parts of the canvas. Repeat this for all of the canvases.

<div style="max-height: 256px;max-width:256px;overflow: scroll;">
          <canvas height="512px" width="512px"></canvas>
</div>   

html5 canvas, add scrollbar on overflow

As the guy said, canvas has no content to overflow
so the best way to do this is to set the canvas width and height to something really big maybe 2200 x 1500 (and you can change the height through js)

This is what your css should look like

.ccsp-area {
  width: 90%;
  height: 100%;
  display: inline-block;
  overflow: scroll;
  canvas {
    display: inline-block;
    background-color: #fff;
  }
}

Set the size from the html element not from the JS at your case (also feel free to remove the js code that sets the size of the canvas)

<canvas id="mainCanvas" width="900" height="500"></canvas>

HTML5 Canvas Always Has Scrollbar

Just add box-sizing:

canvas {
        box-sizing: border-box;
        border: 1px solid black;
        height: 100vh;
        width: 100vw;
}

The reason the scroll bars appear is that the canvas element uses the border that exceeds the window boundaries.

Html5 canvas scrolling vertically and horizontally

So your node drawings don't fit on the canvas size?

You can easily "shrink" your content to fit the visible canvas with just 1 command!

The context.scale(horizontalRescale,verticalRescale) command will shrink every following drawing by your specified horizontalRescale & verticalRescale percentages.

An Important note: You must make horizontalRescale,verticalRescale the same value or your content will be distorted.

The nice thing about using context.scale is that you don't have to change any of the code that draws your nodes ... canvas automatically scales all those nodes for you.

For example, this code will shrink your nodes to 80% of their original size:

var downscaleFactor= 0.80;

context.scale( downscaleFactor, downscaleFactor );

Rather than go through your 200+ lines of code, I leave it to you to calculate downscaleFactor.

Scrollable canvas inside div

Here is a demo of using an oversize canvas, and scrolling with mouse movements by adjusting the CSS margin: https://jsfiddle.net/ax7n8944/

HTML:

<div id="canvasdiv" style="width: 500px; height: 250px; overflow: hidden">
    <canvas id="canvas" width="10000px" height="250px"></canvas>
</div>

JS:

var canvas = document.getElementById("canvas");
var context = canvas.getContext('2d');
var dragging = false;
var lastX;
var marginLeft = 0;

for (var i = 0; i < 1000; i++) {
    context.beginPath();
    context.arc(Math.random() * 10000, Math.random() * 250, 20.0, 0, 2 * Math.PI, false);
    context.stroke();
} 

canvas.addEventListener('mousedown', function(e) {
    var evt = e || event;
    dragging = true;
    lastX = evt.clientX;
    e.preventDefault();
}, false);

window.addEventListener('mousemove', function(e) {
    var evt = e || event;
    if (dragging) {
        var delta = evt.clientX - lastX;
        lastX = evt.clientX;
        marginLeft += delta;
        canvas.style.marginLeft = marginLeft + "px";
    }
    e.preventDefault();
}, false);

window.addEventListener('mouseup', function() {
    dragging = false;
}, false);

Why are there scroll bars despite fitting a canvas exactly to the screen

Add style with overflow of hidden.

<style>
body {
  overflow: hidden;
}
</style>

How to make scrollable canvas image in html js ?

As specified here, you can achieve that as follows:

window.onload = function() {
  // Get the image  const image = new Image()  image.src = 'https://upload.wikimedia.org/wikipedia/commons/3/36/Hopetoun_falls.jpg'
  // Wait Till the Image is loaded  image.onload = function() {    drawCanvas(image)  }
  function drawCanvas(image) {    // Create canvas context    const canvas = document.getElementById('floornet')    const context = canvas.getContext("2d")
    canvas.width = image.height     canvas.height = image.height 
    // Draw image to the canvas    context.drawImage(image, 0, 0)   }}

<main><div style="max-height: 256px;max-width:256px;overflow: scroll;">          <canvas width="512px" height="512px" id="floornet"></canvas></div>  </main>

Canvas dimensions cause a vertical scroll bar to appear

This scroll is because of canvas as it is by default an inline element.

Add overflow: hidden to body

body {
    overflow: hidden;
}

OR you can remove extra white space of canvas by one of two ways:

1. .cv {display: block;}
2. .cv {vertical-align: top;}

html {  padding: 0px;  border: 0px;  margin: 0px;  height: 100%;  width: 100%;}
body {  padding: 0px;  border: 0px;  margin: 0px;  height: 100%;  width: 100%;  background: #00FFFF;}
.top {  padding: 0px;  border: 0px;  margin: 0px;  background-color: #FF0000;  width: 100%;  height: 80px;}
.cv {  padding: 0px;  border: 0px;  margin: 0px;  background-color: #00FF00;  width: 100%;  height: calc(100% - 80px);  border-image-width: 0px;  display: block;}

<div class="top"></div>
<canvas class="cv"></canvas>

Creating scrollbars in an HTML PaperJS canvas element for use with paper.view.zoom

You would have to do what you commented on the end of your question.

• Set initial height of scroll bar to const scrollHeight = view.height
• Create an update function and attach it to view.onFrame
• In update function update scroll objects height depending on current zoom scrollObject.bounds.height = scrollHeight / view.zoom
• You can then determine the scroll bars handle position by getting the position of the highest objects obj.bounds.top, the lowest objects bottom bounds obj.bounds.bottom, and finally use the current view position center to calculate the handle position view.bounds.center

---

Related Topics