# Methods bound to p5 "canvas" vs. offscreen p5 "graphics"

**URL:** <https://discourse.processing.org/t/methods-bound-to-p5-canvas-vs-offscreen-p5-graphics/14079>\
**Category:** Beginners\
**Created:** [September 20, 2019, 3:57am UTC](https://discourse.processing.org/t/methods-bound-to-p5-canvas-vs-offscreen-p5-graphics/14079 "2019-09-20T03:57:14Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![grege2](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/grege2/32/3069_2.png) [@grege2](https://discourse.processing.org/u/grege2)\
**Post date:** [September 20, 2019, 3:57am UTC](https://discourse.processing.org/t/methods-bound-to-p5-canvas-vs-offscreen-p5-graphics/14079/1 "2019-09-20T03:57:14Z")

</div>

Hi folks,

I’m finding that some everyday p5.js methods are not bound to a p5 canvas in the way that I expected. But they are all bound ok to a `p5.Graphics` created with `createGraphics()`.

So, if I create a canvas, with

```auto
  let canvas1 = createCanvas(500,500, P2D);

```

I expected that the following lines would work equivalently …

```auto
  colorMode(RGB);
  canvas1.colorMode(RGB);
  let tgt = canvas1;
  tgt.colorMode(RGB);

```

but in fact only the first bare “colorMode()” works, the next two fail with …

```auto
  Uncaught TypeError: canvas.colorMode is not a function

```

Here’s a sketch showing the problem.

[https://editor.p5js.org/grege2/sketches/n2svRwROL](https://editor.p5js.org/grege2/sketches/n2svRwROL)

You can comment/uncomment the calls annotated ??? to see the issue.

The context is, I want to render a version of a scene on-screen, in a canvas say 1200 x 900, and render a much higher-resolution in an offscreen p5.Graphics buffer, say 12000 x 9000, and then save the high-def buffer to a file with `saveCanvas()`. The offscreen rendering and saving all works fine, but it would be convenient to use the same rendering sequence and just change the render “target”, as shown, ie .

```auto
  tgt = canvas;
  renderScene(tgt);

  tgt = buffer;
  renderScene(tgt);

```

My impression is that this is an intended functionality of p5.js, it seems to be shown at points in the examples and tutorials, but its implementation seems to be inconsistent.

I could be very wrong here, my JavaScript is not quite good enough to decode the prototype trees and object properties etc. etc. to see what `canvas.colorMode()` and the others think they’re doing.

Thanks for any comments.  
Regards, Greg E.

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [September 20, 2019, 5:41am UTC](https://discourse.processing.org/t/methods-bound-to-p5-canvas-vs-offscreen-p5-graphics/14079/2 "2019-09-20T05:41:14Z")

</div>

> [@grege2](#):
>
> it seems to be shown at points in the examples and tutorials, but its implementation seems to be inconsistent.

please link to any example showing

```auto
< object >.colorMode(...);

```

i think the idea is to set the way the interpreter understands following color ranges,

> **[reference | p5.js](https://p5js.org/reference/#/p5/colorMode)**
>
> p5.js a JS client-side library for creating graphic and interactive experiences, based on the core principles of Processing.

also reference states

> Note: existing color objects remember the mode that they were created in

for [color / Reference / Processing.org](https://processing.org/reference/color_datatype.html) only.

but i think you can not read or write that from or to objects.  
get ERROR

> TypeError: canvas1.colorMode is not a function (sketch: line \_\_)

( possibly you make that a feature request? at [Issues · processing/p5.js · GitHub](https://github.com/processing/p5.js/issues)  
but not fully understand its use )

---

<div class="post-metadata">

**Author:** ![grege2](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/grege2/32/3069_2.png) [@grege2](https://discourse.processing.org/u/grege2)\
**Post date:** [September 20, 2019, 7:10am UTC](https://discourse.processing.org/t/methods-bound-to-p5-canvas-vs-offscreen-p5-graphics/14079/3 "2019-09-20T07:10:07Z")

</div>

Hi kll, thanks for the reply.

I don’t have an actual reference to a use of `<object>.colorMode(...)`. I was kind of generalising that many methods seem to be callable as `context.method(...)`, where `context` is either the physical canvas, or a p5.graphics object. But yes … it could be that the `color mode` is a system-wide piece of state. Or at least system-wide within a p5 instance. It wouldn’t be a problem to my code if that was true.

My next step should be I guess to trawl all the p5.js tutorials and examples a bit more, happy to do that.

Cheers, GE.

---

<div class="post-metadata">

**Author:** ![DCsan](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/dcsan/32/12710_2.png) [@DCsan](https://discourse.processing.org/u/DCsan)\
**Post date:** [November 6, 2021, 10:36pm UTC](https://discourse.processing.org/t/methods-bound-to-p5-canvas-vs-offscreen-p5-graphics/14079/4 "2021-11-06T22:36:10Z")

</div>

wondering if you found a solution here? i’m also seeing this inconsistency which gets more complex when you have are layering multiple buffers with different blend modes…

---

<div class="post-metadata">

**Author:** ![grege2](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/grege2/32/3069_2.png) [@grege2](https://discourse.processing.org/u/grege2)\
**Post date:** [November 7, 2021, 3:32am UTC](https://discourse.processing.org/t/methods-bound-to-p5-canvas-vs-offscreen-p5-graphics/14079/5 "2021-11-07T03:32:41Z")

</div>

Hi @DCsan … from memory I didn’t get a good response here or on the p5.js GitHub discussions (well, I _think_ I raised it on GitHub, I’ll have to check)… I just carried on coding it clunkily - using someP5Call() on the default canvas, and myGraphic.someP5Call() in an offscreen canvas. I didn’t do the research through all the examples that I said I would, I was able to continue well enough. I’d be interested in your experiences. Cheers.

---

<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:** [November 7, 2021, 4:23am UTC](https://discourse.processing.org/t/methods-bound-to-p5-canvas-vs-offscreen-p5-graphics/14079/6 "2021-11-07T04:23:30Z")

</div>

FYI **createCanvas()** returns a p5.Renderer object:  
[p5js.org/reference/#/p5/createCanvas](http://p5js.org/reference/#/p5/createCanvas)  
[p5js.org/reference/#/p5.Renderer](http://p5js.org/reference/#/p5.Renderer)

While **createGraphics()** returns a p5.Graphics object:  
[p5js.org/reference/#/p5/createGraphics](http://p5js.org/reference/#/p5/createGraphics)  
[p5js.org/reference/#/p5.Graphics](http://p5js.org/reference/#/p5.Graphics)

I’ve already ranted many times in this forum about the fact a p5.Graphics object is a hack which merges p5.Renderer & p5 types together.

We can access all p5 properties over a p5.Graphics object; even something like **random()**, **cos()**, **createGraphics()**, etc.