# From Graphics to HTML in div

**URL:** https://discourse.processing.org/t/from-graphics-to-html-in-div/4646
**Category:** Coding Questions
**Created:** [October 19, 2018, 4:40pm UTC](https://discourse.processing.org/t/from-graphics-to-html-in-div/4646 "2018-10-19T16:40:25Z")
**Posts on this page:** 11
**Page:** 1

<div class="post-metadata">

### Author: ![Charles\_Tech](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/charles_tech/32/2012_2.png) [@Charles\_Tech](https://discourse.processing.org/u/Charles_Tech)
#### Post date: [October 19, 2018, 4:40pm UTC](https://discourse.processing.org/t/from-graphics-to-html-in-div/4646/1 "2018-10-19T16:40:25Z")

</div>

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](https://jsfiddle.net/rrcqkq7d/21/)

Thanks,  
Charles

---

<div class="post-metadata">

### Author: ![Zac-04](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/zac-04/32/2009_2.png) [@Zac-04](https://discourse.processing.org/u/Zac-04)
#### Post date: [October 19, 2018, 4:43pm UTC](https://discourse.processing.org/t/from-graphics-to-html-in-div/4646/2 "2018-10-19T16:43:52Z")

</div>

I guess you could do:

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

or just add that into the html itself.

---

<div class="post-metadata">

### Author: ![Charles\_Tech](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/charles_tech/32/2012_2.png) [@Charles\_Tech](https://discourse.processing.org/u/Charles_Tech)
#### Post date: [October 19, 2018, 4:45pm UTC](https://discourse.processing.org/t/from-graphics-to-html-in-div/4646/3 "2018-10-19T16:45:17Z")

</div>

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

---

<div class="post-metadata">

### Author: ![Zac-04](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/zac-04/32/2009_2.png) [@Zac-04](https://discourse.processing.org/u/Zac-04)
#### Post date: [October 19, 2018, 4:46pm UTC](https://discourse.processing.org/t/from-graphics-to-html-in-div/4646/4 "2018-10-19T16:46:48Z")

</div>

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">'`

---

<div class="post-metadata">

### Author: ![Zac-04](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/zac-04/32/2009_2.png) [@Zac-04](https://discourse.processing.org/u/Zac-04)
#### Post date: [October 19, 2018, 4:48pm UTC](https://discourse.processing.org/t/from-graphics-to-html-in-div/4646/5 "2018-10-19T16:48:38Z")

</div>

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

```

---

<div class="post-metadata">

### Author: ![Charles\_Tech](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/charles_tech/32/2012_2.png) [@Charles\_Tech](https://discourse.processing.org/u/Charles_Tech)
#### Post date: [October 19, 2018, 4:49pm UTC](https://discourse.processing.org/t/from-graphics-to-html-in-div/4646/6 "2018-10-19T16:49:47Z")

</div>

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

---

<div class="post-metadata">

### Author: ![Zac-04](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/zac-04/32/2009_2.png) [@Zac-04](https://discourse.processing.org/u/Zac-04)
#### Post date: [October 19, 2018, 4:52pm UTC](https://discourse.processing.org/t/from-graphics-to-html-in-div/4646/7 "2018-10-19T16:52:23Z")

</div>

> **[Ajax/Javascript: 8 Ways to Create Graphics on the Fly](http://softwareas.com/ajaxjavascript-8-ways-to-create-graphics-on-the-fly/)**
>
> Ajax/Javascript: 8 Ways to Create Graphics on the Fly – digg this The ability to create rich graphics on the fly is one of the critical gaps in Ajax. There are indeed techniques to do it, alb…

There are many examples here that you can use then.

---

<div class="post-metadata">

### Author: ![Charles\_Tech](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/charles_tech/32/2012_2.png) [@Charles\_Tech](https://discourse.processing.org/u/Charles_Tech)
#### Post date: [October 19, 2018, 4:54pm UTC](https://discourse.processing.org/t/from-graphics-to-html-in-div/4646/8 "2018-10-19T16:54:01Z")

</div>

Needs to be done with P5…

---

<div class="post-metadata">

### Author: ![Zac-04](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/zac-04/32/2009_2.png) [@Zac-04](https://discourse.processing.org/u/Zac-04)
#### Post date: [October 19, 2018, 4:56pm UTC](https://discourse.processing.org/t/from-graphics-to-html-in-div/4646/9 "2018-10-19T16:56:54Z")

</div>

I can’t help you then. Sorry.

---

<div class="post-metadata">

### Author: ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)
#### Post date: [October 19, 2018, 5:12pm UTC](https://discourse.processing.org/t/from-graphics-to-html-in-div/4646/10 "2018-10-19T17:12:41Z")

</div>

You may try out **show()** and/or **parent()** methods: 🤷‍♂️

1. **show()** -\> [p5js.org/reference/#/p5.Element/show](http://p5js.org/reference/#/p5.Element/show)
2. **parent()** -\> [p5js.org/reference/#/p5.Element/parent](http://p5js.org/reference/#/p5.Element/parent)

---

<div class="post-metadata">

### Author: ![Charles\_Tech](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/charles_tech/32/2012_2.png) [@Charles\_Tech](https://discourse.processing.org/u/Charles_Tech)
#### Post date: [October 20, 2018, 9:02am UTC](https://discourse.processing.org/t/from-graphics-to-html-in-div/4646/11 "2018-10-20T09:02:58Z")

</div>

Thanks @GoToLoop that did the trick

[JSFiddle](https://jsfiddle.net/rrcqkq7d/25/)