p5.Renderer is missing methods

[osresearch]

Nature of issue?

• Found a bug
• Existing feature enhancement
• New feature request

Most appropriate sub-area of p5.js?

• Color
• Core/Environment/Rendering
• Data
• Events
• Image
• IO
• Math
• Typography
• Utilities
• WebGL
• Other (specify if possible)

Which platform were you using when you encountered this?

• Mobile/Tablet (touch devices)
• Desktop/Laptop
• Others (specify if possible)

Details about the bug:

• p5.js version: p5.js v0.8.0 April 08, 2019
• Web browser and version: 74.0.3729.169 (Official Build) (64-bit)
• Operating System: Linux
• Steps to reproduce this:

Trying to call some methods on the p5.Renderer returned from createCanvas() doesn't work. For instance:

let p5

function setup() {
  p5 = createCanvas(400, 400);
}

function draw() {
  p5.background(220);
  p5.strokeWeight(10)
  p5.stroke(0)
  p5.circle(width/2, height/2, 100, 100);
}

results in the error (on the javascript console) that p5.circle is not a function. similar results for noStroke and other methods that are in the documentation. Some methods, like line() and stroke() work, while others like ellipse() are defined but don't seem to produce any output.

Feature enhancement details:

All these methods do work for the p5.Graphics context returned by createGraphics(), so it would be nice if they were consistent between the graphics and renderer objects.

let p5

function setup() {
  createCanvas(400, 400);
  p5 = createGraphics(400,400)
}

function draw() {
  p5.background(220);
  p5.noStroke()
  p5.fill(0)
  p5.circle(width/2, height/2, 100, 100);
  
  image(p5, 0, 0)
}

An alternate way to solve it would be if it were possible to create a graphics context from a renderer, although I don't see any methods currently for doing so.

[welcome]

Welcome! 👋 Thanks for opening your first issue here! And to ensure the community is able to respond to your issue, be sure to follow the issue template if you haven't already.

[AnuragGupta93]

@osresearch The p5.renderer has access to only the main graphics and rendering methods.

But, it is extended to p5.renderer2D or p5.rendererGL (depends) and thus have the methods background(), noStroke() and fill(). However, circle() is a method of core/Shape and thus can't be implemented using p5.renderer.

[AnuragGupta93]

However, I do feel that p5.renderer should have proper documentation which includes its methods just like p5.Element.

Also, I found out that there is no documentation for p5.renderer2D and p5.rendererGL and thinking of implementing the same.

What are your views @lmccart @stalgiag ?

[ahujadivyam]

p5._pInst.circle() should work