0

So I am kind of new to p5.js, and I have tried to create a simple tile-based game. My current canvas represents my entire map and it is bigger than the computer screen. As a result, I want to use a scrolling camera that follows the player.

However, I have two problems. The first is that there are two scrollbars on the sides of the canvas that I want to disable. The second is that I am unsure how to create said scrolling camera on p5.js. Any help would be greatly appreciated!

My program is stored on replit. The main body code is in sketch.js

https://replit.com/@TonyWu4/Project#sketch.js

Tony Wu
  • 3
  • 2
  • 2
    You must add the relevant code to the question! Links to external resources tend to break, may not be available in the future, or content may change. – Rabbid76 Apr 19 '22 at 05:09
  • 2
    What do you want to do exactly? Do you want to reduce the size of the canvas, hide the scrollbars, or remove them entirely so you cannot scroll through the map? – cSharp Apr 19 '22 at 06:26
  • 1
    just use a second canvas that is not attached to the document, draw the map into that and then on each frame, use https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/drawImage to draw the currently relevant selection of the map, to the visible canvas. – GottZ Apr 19 '22 at 06:48
  • Regarding your second question, make sure to take a look at the canonical [HTML5 Canvas camera/viewport - how to actually do it?](https://stackoverflow.com/questions/16919601/html5-canvas-camera-viewport-how-to-actually-do-it/), which is agnostic to p5.js but gives the high-level approach. – ggorlen Apr 21 '22 at 17:02

1 Answers1

0

To hide the scrollbars you can add this code inside the <head> tag of your index.html file:

  <style>
    body {
      padding: 00;
      margin: 00;
      overflow: hidden;
      position: fixed;
    }
  </style>
hayabuzo
  • 98
  • 7