# Getting nothing when trying to show image with the help of HTML tag **URL:** \ **Category:** Coding Questions\ **Created:** [December 13, 2019, 5:32pm UTC](https://discourse.processing.org/t/getting-nothing-when-trying-to-show-image-with-the-help-of-html-tag/16378 "2019-12-13T17:32:01Z")\ **Posts on this page:** 7\ **Page:** 1

**Author:** ![RadheTians](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/radhetians/32/8541_2.png) [@RadheTians](https://discourse.processing.org/u/RadheTians)\ **Post date:** [December 13, 2019, 5:32pm UTC](https://discourse.processing.org/t/getting-nothing-when-trying-to-show-image-with-the-help-of-html-tag/16378/1 "2019-12-13T17:32:01Z")

I noticed that when I was trying to show an image on canvas with the help of HTML tags(i.e input tag and type is file) the codebase wasn’t showing an image and when I was trying to show with the help of p5.js function `createFileInput(readImageURL);` then it is going to show. This is the sample code snippet that demonstrates the problem and their alternative solution. When I was trying to do like the following… ```auto Upload image: ``` it wasn’t going to show an image on the canvas. and then when I was tried to show an image like the following… ```auto ``` It was going to show a image on canvas. I’m not understanding why it’s going to happen. ---

**Author:** ![bzSteve](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/bzsteve/32/7358_2.png) [@bzSteve](https://discourse.processing.org/u/bzSteve)\ **Post date:** [December 13, 2019, 6:57pm UTC](https://discourse.processing.org/t/getting-nothing-when-trying-to-show-image-with-the-help-of-html-tag/16378/2 "2019-12-13T18:57:29Z")

Hi RadheTians. I’m not sure I’m understanding the problem. Is it that the image is displaying on the p5.js canvas, but you prefer it to draw via html? For the html element, I think you use img.show() and img.hide(). If you prefer the p5.js canvas, from the draw() function, call image(img,x,y) to draw or do nothing if you want to hide it. Does that help, or are you experiencing another issue? ---

**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:** [December 13, 2019, 8:42pm UTC](https://discourse.processing.org/t/getting-nothing-when-trying-to-show-image-with-the-help-of-html-tag/16378/3 "2019-12-13T20:42:28Z")

I’ve got this runnable online example, but using [**drop()**](https://p5js.org/reference/#/p5.Element/drop) instead of [**createFileInput()**](https://p5js.org/reference/#/p5/createFileInput): 📁 [http://p5js.SketchPad.cc/sp/pad/view/ro.CYTkHWj9smgw8Q/latest](http://p5js.SketchPad.cc/sp/pad/view/ro.CYTkHWj9smgw8Q/latest) ---

**Author:** ![RadheTians](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/radhetians/32/8541_2.png) [@RadheTians](https://discourse.processing.org/u/RadheTians)\ **Post date:** [December 15, 2019, 6:18pm UTC](https://discourse.processing.org/t/getting-nothing-when-trying-to-show-image-with-the-help-of-html-tag/16378/4 "2019-12-15T18:18:14Z")

Hello, @bzSteve thanks for your response and sorry for late reply, Actually I am trying to show an image with the help of HTML tag(i.e input tag and type is file) and but I’m getting an error and if I try to show by p5.js function `createFileInput()` then it’s going to work well. ---

**Author:** ![RadheTians](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/radhetians/32/8541_2.png) [@RadheTians](https://discourse.processing.org/u/RadheTians)\ **Post date:** [December 15, 2019, 6:20pm UTC](https://discourse.processing.org/t/getting-nothing-when-trying-to-show-image-with-the-help-of-html-tag/16378/5 "2019-12-15T18:20:46Z")

Hello @GoToLoop thanks for your response but I need to show an image by HTML tag (i.e input tag and type file). ---

**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:** [December 16, 2019, 6:37am UTC](https://discourse.processing.org/t/getting-nothing-when-trying-to-show-image-with-the-help-of-html-tag/16378/6 "2019-12-16T06:37:36Z")

> [@RadheTians](#): > > … but I need to show an image by HTML tag (i.e input tag and type file). You can create HTML tags as placeholders w/ an unique _id_: 🏷 > **[id - HTML: HyperText Markup Language | MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id)** > > The id global attribute defines an identifier (ID) which must be unique in the whole document. Its purpose is to identify the element when linking (using a fragment identifier), scripting, or styling (with CSS). Then, inside your p5js sketch, call method **parent()** in order to make any [p5.Element](https://p5js.org/reference/#/p5.Element) a child of 1 of those placeholders already predefined in your “.html” file: 💡 > **[reference | p5.js](https://p5js.org/reference/#/p5.Element/parent)** > > p5.js a JS client-side library for creating graphic and interactive experiences, based on the core principles of Processing. ---

**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:** [December 16, 2019, 6:47am UTC](https://discourse.processing.org/t/getting-nothing-when-trying-to-show-image-with-the-help-of-html-tag/16378/7 "2019-12-16T06:47:37Z")

Here’s an example where method **parent()** is invoked on the sketch’s canvas itself, so it appears between 2 `` tags: > **[Place Canvas Between 2 Images](http://bl.ocks.org/GoSubRoutine/56bc62553a754febacfe61e6f9239c69)** > > GoSubRoutine’s Block 56bc62553a754febacfe61e6f9239c69 > > > There are more than three files. show original For that a `

` placeholder is predefined in the “index.html” w/ an _id_ named “between”: ```auto

``` And inside “sketch.js”, we make the canvas a child of that _between_ `

` placeholder tag: `createCanvas(400, 400).parent(between);` We can do the same for any [p5.Element](https://p5js.org/reference/#/p5.Element) subclass type btW.