# Canvas.parent() with Multiple HTML files

**URL:** <https://discourse.processing.org/t/canvas-parent-with-multiple-html-files/31892>\
**Category:** p5.js\
**Created:** [August 24, 2021, 4:45pm UTC](https://discourse.processing.org/t/canvas-parent-with-multiple-html-files/31892 "2021-08-24T16:45:05Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![dtools22](https://avatars.discourse-cdn.com/v4/letter/d/f19dbf/32.png) [@dtools22](https://discourse.processing.org/u/dtools22)\
**Post date:** [August 24, 2021, 4:45pm UTC](https://discourse.processing.org/t/canvas-parent-with-multiple-html-files/31892/1 "2021-08-24T16:45:05Z")

</div>

Hello all!

I’m sure this is a simple question but I’m having some trouble finding the answer. I have a website I am designing that has multiple HTML pages. The main page is a standard “index.html” file and the subsequent pages are filed in a folder titled “HTML”. In one of these secondary pages, I want to run my P5.js canvas.

When I was running the sketch on the “index.html” page I was using the .parent() function. In the “index.html” file I have a `<div id = 'sketch-holder'>` element to place the canvas on the page.

```auto
let canvas;

function setup(){
 canvas = createCanvas(650, 375);
 canvas.parent('sketch-holder');
}

```

That worked fine. Then I decided I wanted to see how the site would function with the JS canvas running on a different HTML page, so I moved that `<div id = 'sketch-holder'>` into one of the html files in the “HTML” directory. The canvas is not on the new page and I have a 404 File not found error in the consol.

When I am pointing to an html file in the subdirectory, do I need to put something different in the canvas.parent() function? Something like this:

```auto
canvas.parent('HTML/SecondHTMLfile/sketch-holder');

```

Thank you all as always for the help.

---

<div class="post-metadata">

**Author:** ![KumuPaul](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kumupaul/32/13072_2.png) [@KumuPaul](https://discourse.processing.org/u/KumuPaul)\
**Post date:** [August 24, 2021, 7:54pm UTC](https://discourse.processing.org/t/canvas-parent-with-multiple-html-files/31892/2 "2021-08-24T19:54:33Z")

</div>

Without seeing all of your project files it is hard to say exactly what the issue is. However, conceptually speaking referencing an element in one HTML file from another is not possible in the way you have described. Excluding the use of frames, the web browser loads a single HTML file and that HTML file loads JavaScript files. The code in those JavaScript files can only reference elements that are either declared in that HTML file or added to the DOM via JavaScript. So if you want to replicate your sketch from index.html to a different page you will need that other page to load the p5.js library via a `<script>` tag, load your sketch JavaScript via a sketch tag, and declare any elements that your sketch JavaScript might be expecting to exist. So long as the layout of the page is similar you should be able to use the same sketch JavaScript on multiple pages.

---

<div class="post-metadata">

**Author:** ![dtools22](https://avatars.discourse-cdn.com/v4/letter/d/f19dbf/32.png) [@dtools22](https://discourse.processing.org/u/dtools22)\
**Post date:** [August 25, 2021, 1:57pm UTC](https://discourse.processing.org/t/canvas-parent-with-multiple-html-files/31892/3 "2021-08-25T13:57:57Z")

</div>

Thank you for the response!

The beginning of the secondary HTML does include the following.

```auto
<script src="libraries/p5.min.js"></script>
<script src="libraries/p5.sound.min.js"></script>
<script src="../sketch.js"></script>
<script src="../Tile.js"></script>

```

The sketch.js and Tile.js files both work to create the effect I’m going for on the canvas. I also includd the “…/” because the .js files are in the main directory where as the HTML for the secondary pages is in a HTML/ directory. Do I not need those and maybe that was my issue?

I thought maybe initially that I was just misusing the .parent() function.

---

<div class="post-metadata">

**Author:** ![KumuPaul](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kumupaul/32/13072_2.png) [@KumuPaul](https://discourse.processing.org/u/KumuPaul)\
**Post date:** [August 26, 2021, 12:31am UTC](https://discourse.processing.org/t/canvas-parent-with-multiple-html-files/31892/4 "2021-08-26T00:31:12Z")

</div>

Your usage of `../` in the paths to your javascript files makes sense if this HTML file is in a subdirectory. You should check exactly which resource is generating an HTTP 404 when the page loads. Is your `libraries` folder also a level above the subdirectory where this HTML file is? Perhaps you need to be using `../libraries`