Canvas Location

seb646

I was wondering if there was a way to have the loaded in the same location as the tag is. So, if I have the script tag is placed on a HTML page like so:

<p><script src="/js/file.js" type="text/javascript"></script></p>

Tthen the canvas would load as follows:

<p><script src="/js/file.js" type="text/javascript"></script><canvas id="defaultCanvas0" class="" width="1000" height="800" style="width: 500px; height: 400px;"></canvas></p>

I know that the location is predefined, but I was wondering if it was possible to change it.

Thanks! :)

blindfish

It's possible in instance mode, but that does change the way you code your sketch...

Otherwise not sure: pretty sure this has been asked before. Did you not find any previous answers?

GoToLoop

AFaIK, createCanvas() creates its own HTMLCanvasElement and can't be forced to use an already existing 1. :| Most we can do is specify a DOM node parent() for it: :ar!

1. http://p5js.org/reference/#/p5.Element/parent
2. https://forum.Processing.org/two/discussions/tagged?Tag=parent()

createCanvas(1000, 800).parent('defaultCanvas0');

<meta charset=utf8>
<script src=http://p5js.org/js/p5.min.js defer></script>
<script src=js/file.js async></script>
<div id=defaultCanvas0></div>