Add scroll bar to canvas after initial load

I’m using canvas and need to add a scroll bar only when necessary. When the page loads there is not enough content for a scroll bar to be necessary. I am creating a binary search tree visualizer where the user can insert nodes. Each time a node object is inserted it is moved down to the next level which eventually results in nodes being placed off the screen. I want to have a scroll bar once an attempt is made to place a node off screen. I have tried the following and am not having any luck.

function setup () { 
    var canvas = createCanvas(windowWidth - 100, windowHeight - 350);

canvas {
    border: 1px solid black;
    margin-left: 40px;
    overflow: auto;

I have read about the using “auto” and my understanding is that it allows the ability to scroll if it is determined that the content exceeds a particular space. That being said I am not sure if I am misunderstanding this property or if I am using it incorrectly.

It may also be worth mentioning, I am working with the p5.js library for visualization. This works by calling “setup” once the page is accessed. I have used “overflow: auto” in other places in my project and have had no issues as long as the content exceeds the space initially. This makes the feel like my first thought is my problem. If this is the case, how would I go about achieving my goal?

Initial Thoughts:

  1. setup ( ) is only called once and this is why overflow works in cases where the content starts off by exceeding the space created.
  2. I am misunderstanding how to handle overflow and should use something other than “auto” to handle this particular case.


A scroll bar does not appear from the p5 canvas as long as it is smaller than the window. You can resize the canvas using resizeCanvas().