HTML5 Canvas Scrolling Vertically and Horizontally

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.

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 and Canvas scrolling: trick interesting or useless?

My final conclusion: after many tries, including Eirk Reppen suggestion, I write directly "raw" into hidden parts of the canvas and use CSS: all webbrowsers handle already image flickering and all that stuff around, and they have already optimized everything.

So each time I've tried to "optimize", the results were worse.

It seems that webbrowsers are made to handle properly basic stuff made by beginnners... maybe because 99% of HTML content is made by beginners.

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

Add style with overflow of hidden.

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

Why does a horizontal scroll-bar appear when adding small div below HTML Canvas?

This is unrelated to <canvas> and the behavior is the same with any other block element such as a <div>.

If you set the lone element in the <body>'s dimensions to innerWidth/innerHeight and the parent <body> has no padding or margin, then you've used up exactly all of the space on the page and no scrollbars are necessary.

If you add a <div> below your full-page element, a vertical scrollbar becomes necessary to allow the user to move the viewport down to see it. But this new vertical scrollbar now takes up some horizontal space that is ignored by innerWidth, as the docs state:

innerWidth returns the interior width of the window in pixels. This includes the width of the vertical scroll bar, if one is present.

The original element set to exactly innerWidth pixels now overflows the screen horizontally by the width of the vertical scrollbar. Therefore, a horizontal scrollbar becomes necessary.

An option you can try is document.documentElement.clientWidth. As the docs state:

clientWidth [...] includes padding but excludes borders, margins, and vertical scrollbars (if present).

(you might need to click 'full page' after running the snippet to see the difference):

const canvas = document.getElementById("main-canvas");
canvas.width = document.documentElement.clientWidth;
canvas.height = document.documentElement.clientHeight;
window.addEventListener("resize", // TODO debounce
  function () {
    canvas.width = document.documentElement.clientWidth;
    canvas.height = document.documentElement.clientHeight;  
  }
);

body {
  background-color: red;
  margin: 0;
  padding: 0;
}

#main-canvas {
  display: block;
  background-color: blue;
}

#info {
  width: 50px;
  height: 50px;
  background-color: green;
}

<canvas id="main-canvas"></canvas>
<div id="info"></div>

HTML5 canvas and scrolling

I actually have a canvasDiv container, which is the real scrollable element, not the canvas itself.

This means your canvas is the full size and you're using the container div as a sort of a "frame". That's really bad as canvas pixels are quite expensive, especially if you're not even using them (they're out of the viewport).

The best approach here is to set the canvas size to the container size and use the drawImage function to control the scrolling. The original image would be places either on an offscreen canvas or an image element. I can guarantee you a much better performance this way.

You'll lose the scrollbars, that's the downside.

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

HTML5 Canvas Scrolling Vertically and Horizontally