From Graphics to HTML in div

p5.js Coding Questions
1

Hi all,

I’m in WEBGL mode which doesn’t support image() (in 0.5.16 anyway) - how can I load a graphics into a an html div?

JS Fiddle here

Thanks,
Charles

1 Like
2

I guess you could do:

document.getElementById("my-image").innerHTML = '<img src="myimage.jpg">'

or just add that into the html itself.

3

Did you read the question or did I misunderstand your answer? - The image isn’t saved locally

4

If I am not mistaken you can use a link in src, so that is not a problem

document.getElementById("my-image").innerHTML = '<img src="http://i.imgur.com/jiItp64.png">'

5 
<h1>
3D with WebGL
</h1>
<div id="my-image">
  
  <img src="http://i.imgur.com/jiItp64.png">
</div>
1 Like
6

I’m creating my Graphics on the “fly” therefore I don’t have src link

7

There are many examples here that you can use then.

8

Needs to be done with P5…

9

I can’t help you then. Sorry.

10

You may try out show() and/or parent() methods: :man_shrugging:

  1. show() -> p5js.org/reference/#/p5.Element/show
  2. parent() -> p5js.org/reference/#/p5.Element/parent
1 Like
11

Thanks @GoToLoop that did the trick

JSFiddle

1 Like