Document

# Use an existing canvas with p5js **URL:** \ **Category:** Libraries\ **Created:** [December 10, 2020, 12:49pm UTC](https://discourse.processing.org/t/use-an-existing-canvas-with-p5js/26113 "2020-12-10T12:49:48Z")\ **Posts on this page:** 6\ **Page:** 1

**Author:** ![niko](https://avatars.discourse-cdn.com/v4/letter/n/91b2a8/32.png) [@niko](https://discourse.processing.org/u/niko)\ **Post date:** [December 10, 2020, 12:49pm UTC](https://discourse.processing.org/t/use-an-existing-canvas-with-p5js/26113/1 "2020-12-10T12:49:48Z")

Hi, I would like to use an existing canvas with p5js. It seems not possible in a simple way. The reason I want to do that is: I don’t want p5js to insert a canvas and make my already displayed page to suddenly extend. This will generally not happen because the script will start quickly, but I have no guarantee this won’t happen to someone whose browser takes too much time to download the p5j library. I hate it when a page extends itself when I am browsing it, and I think such behavior should not exist. How would you solve this problem? Thanks for your answer. ---

**Author:** ![ErraticGenerator](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/erraticgenerator/32/11304_2.png) [@ErraticGenerator](https://discourse.processing.org/u/ErraticGenerator)\ **Post date:** [December 10, 2020, 9:14pm UTC](https://discourse.processing.org/t/use-an-existing-canvas-with-p5js/26113/2 "2020-12-10T21:14:08Z")

I couldn’t find a way to connect an existing canvas to p5js drawings, but if your concern is the page shifting due to late loading of the library, you can specify a parent HTML element of the p5js canvas. Say, create an empty `div` the same size as the p5js canvas first: > **[examples | p5.js](https://p5js.org/examples/instance-mode-instance-container.html)** here is a simple example I made: ```auto Document

``` ---

**Author:** ![niko](https://avatars.discourse-cdn.com/v4/letter/n/91b2a8/32.png) [@niko](https://discourse.processing.org/u/niko)\ **Post date:** [December 10, 2020, 10:14pm UTC](https://discourse.processing.org/t/use-an-existing-canvas-with-p5js/26113/3 "2020-12-10T22:14:36Z")

Thank you, this works well. I like the delayed loading simulation part. Previously I tried something similar for the container, but instead of using a fixed width and height, I tried `width: 100%` and `padding-bottom: 56.25%`, to create a container with ratio 16:9 filling its parent (and therefore automatic width and height). It worked for the container, but failed when the canvas was inserted (because the container grew). I guess I’ll use fixed width and height as in your example, now that I know it works, but do you know why the following give a strange result? (e.g. the container grows after the canvas insertion): ```auto Document

``` ---

**Author:** ![niko](https://avatars.discourse-cdn.com/v4/letter/n/91b2a8/32.png) [@niko](https://discourse.processing.org/u/niko)\ **Post date:** [December 10, 2020, 10:35pm UTC](https://discourse.processing.org/t/use-an-existing-canvas-with-p5js/26113/4 "2020-12-10T22:35:09Z")

Sorry I found the problem. I should remove the container padding before inserting. `container.style.paddingBottom = '0'` I shouldn’t copy paste code I don’t understand from the internet. ---

**Author:** ![ErraticGenerator](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/erraticgenerator/32/11304_2.png) [@ErraticGenerator](https://discourse.processing.org/u/ErraticGenerator)\ **Post date:** [December 10, 2020, 10:51pm UTC](https://discourse.processing.org/t/use-an-existing-canvas-with-p5js/26113/5 "2020-12-10T22:51:44Z")

No worries. The parent padding trick is an interesting one to use to keep the same aspect ratio, and for this to work, it needs a few more lines of CSS. I think this will solve the immediate issue of resizing the p5 canvas, but I also see some potential issues such as the canvas getting too large and heavy. It might be better to keep the canvas size fixed to 16:9, say, 960x540 and just scale it up and down without increasing the pixel count. ```auto Document

``` ---

**Author:** ![niko](https://avatars.discourse-cdn.com/v4/letter/n/91b2a8/32.png) [@niko](https://discourse.processing.org/u/niko)\ **Post date:** [December 27, 2020, 10:48am UTC](https://discourse.processing.org/t/use-an-existing-canvas-with-p5js/26113/6 "2020-12-27T10:48:51Z")

Ok I got it. thank you very much.