# Is there a way to use an external canvas as the canvas p5 uses

**URL:** <https://discourse.processing.org/t/is-there-a-way-to-use-an-external-canvas-as-the-canvas-p5-uses/32910>\
**Category:** Coding Questions\
**Created:** [October 18, 2021, 3:11pm UTC](https://discourse.processing.org/t/is-there-a-way-to-use-an-external-canvas-as-the-canvas-p5-uses/32910 "2021-10-18T15:11:35Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Errorbot1122](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/errorbot1122/32/14718_2.png) [@Errorbot1122](https://discourse.processing.org/u/Errorbot1122)\
**Post date:** [October 18, 2021, 3:11pm UTC](https://discourse.processing.org/t/is-there-a-way-to-use-an-external-canvas-as-the-canvas-p5-uses/32910/1 "2021-10-18T15:11:35Z")

</div>

Is there a way to use the `<canvas>` tag as the p5 canvas?

## Background

Non really, I just want to create a premade canvas in my HTML

## What I’ve tried

I try looking at the doc and searching on google, I could not find anything.

---

<div class="post-metadata">

**Author:** ![micuat](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/micuat/32/19407_2.png) [@micuat](https://discourse.processing.org/u/micuat)\
**Post date:** [October 18, 2021, 8:48pm UTC](https://discourse.processing.org/t/is-there-a-way-to-use-an-external-canvas-as-the-canvas-p5-uses/32910/2 "2021-10-18T20:48:32Z")

</div>

you can! simply get a reference with `select()` and throw it into `image`, for example:

[https://editor.p5js.org/micuat/sketches/b5ioarAI4](https://editor.p5js.org/micuat/sketches/b5ioarAI4)

```javascript
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
canvas.width = canvas.height = 200;
ctx.fillStyle = 'steelblue';
ctx.fillRect(0, 0, 200, 200);
ctx.fillStyle = 'plum';
ctx.fillRect(10, 10, 150, 100);

let canvasRef;
function setup() {
  createCanvas(400, 400);
  canvasRef = select('#canvas')
}

function draw() {
  background(220);
  image(canvasRef, mouseX, mouseY)
}

```

of course if you know how to work with canvas API, you can call those functions through `drawingContext` reference instead of `image()`.

Edit:

I noticed what you meant is just to use `<canvas>` as a place where p5.js draws… in that case, this guide helps:

> **[Global and instance mode · processing/p5.js Wiki](https://github.com/processing/p5.js/wiki/Global-and-instance-mode#specifying-parent-html-element)**
>
> p5.js is a client-side JS platform that empowers artists, designers, students, and anyone to learn to code and express themselves creatively on the web. It is based on the core principles of Proces...

---

<div class="post-metadata">

**Author:** ![Errorbot1122](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/errorbot1122/32/14718_2.png) [@Errorbot1122](https://discourse.processing.org/u/Errorbot1122)\
**Post date:** [October 18, 2021, 8:59pm UTC](https://discourse.processing.org/t/is-there-a-way-to-use-an-external-canvas-as-the-canvas-p5-uses/32910/3 "2021-10-18T20:59:08Z")

</div>

So I just use global mode?

---

<div class="post-metadata">

**Author:** ![micuat](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/micuat/32/19407_2.png) [@micuat](https://discourse.processing.org/u/micuat)\
**Post date:** [October 18, 2021, 9:13pm UTC](https://discourse.processing.org/t/is-there-a-way-to-use-an-external-canvas-as-the-canvas-p5-uses/32910/4 "2021-10-18T21:13:35Z")

</div>

sorry for the confusion, you can do it both with global and instance mode! just you need to use `parent` to fit the canvas to wherever you want  
[https://editor.p5js.org/micuat/sketches/Gj7qYiSSr](https://editor.p5js.org/micuat/sketches/Gj7qYiSSr)

```javascript
function setup() {
  createCanvas(400, 400).parent("#p5sketch");
}

function draw() {
  background(220);
}

```

nonetheless this takes `<div>` as a destination of the canvas to place, not selecting `<canvas>` itself. I don’t know if it’s possible to “attach” p5 sketch to a given `<canvas>` (unless copying the content of p5.js into a given canvas, just like the other way round of my “wrong” example above)

---

<div class="post-metadata">

**Author:** ![Errorbot1122](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/errorbot1122/32/14718_2.png) [@Errorbot1122](https://discourse.processing.org/u/Errorbot1122)\
**Post date:** [October 18, 2021, 9:18pm UTC](https://discourse.processing.org/t/is-there-a-way-to-use-an-external-canvas-as-the-canvas-p5-uses/32910/5 "2021-10-18T21:18:12Z")

</div>

oof okay ☹

its fine thanks anyway, ill just work around it