Incompatible with P5.js version 1.7.0 and 1.8.0

[bcorporaal]

If I try to use p5.js-svg with a newer version of p5.js (1.7.0 and 1.8.0) I get the following error message:
Uncaught TypeError: this.drawingContext is undefined

When I switch back the p5 version to 1.6.0, everything is fine. An easy way to test is is to use the example page from this repository and try different versions of p5.js.

The full message I get in Firefox is:

Uncaught TypeError: this.drawingContext is undefined
    resize https://unpkg.com/p5.js-svg@1.5.1:1646
    createCanvas https://unpkg.com/p5.js-svg@1.5.1:2012
    setup http://127.0.0.1:5500/examples/lib/demo.js line 31 > eval:3
    _setup https://unpkg.com/p5@1.7.0/lib/p5.js:61891
    _start https://unpkg.com/p5@1.7.0/lib/p5.js:61826
    p5 https://unpkg.com/p5@1.7.0/lib/p5.js:62131
    onload http://127.0.0.1:5500/examples/lib/demo.js:32
    route http://127.0.0.1:5500/examples/lib/demo.js:22
    <anonymous> http://127.0.0.1:5500/examples/lib/demo.js:38
p5.js-svg@1.5.1:1646:17
    resize https://unpkg.com/p5.js-svg@1.5.1:1646
    createCanvas https://unpkg.com/p5.js-svg@1.5.1:2012
    setup http://127.0.0.1:5500/examples/lib/demo.js line 31 > eval:3
    _setup https://unpkg.com/p5@1.7.0/lib/p5.js:61891
    _start https://unpkg.com/p5@1.7.0/lib/p5.js:61826
    p5 https://unpkg.com/p5@1.7.0/lib/p5.js:62131
    onload http://127.0.0.1:5500/examples/lib/demo.js:32
    (Async: EventHandlerNonNull)
    route http://127.0.0.1:5500/examples/lib/demo.js:22
    <anonymous> http://127.0.0.1:5500/examples/lib/demo.js:38

I get a similar error message in Chrome:

p5.js-svg@1.5.1:1646 Uncaught TypeError: Cannot read properties of undefined (reading '__clearCanvas')
    at RendererSVG.RendererSVG.resize (p5.js-svg@1.5.1:1646:37)
    at Rendering.p5.createCanvas (p5.js-svg@1.5.1:2012:32)
    at setup (eval at req.onload (demo.js:31:9), <anonymous>:3:5)
    at p5._setup (p5.js:61891:25)
    at p5._start (p5.js:61826:23)

And Safari:

[Error] TypeError: undefined is not an object (evaluating 'this.drawingContext.__clearCanvas')
	(anonymous function) (p5.svg.js:1646)
	(anonymous function) (p5.svg.js:2012)
	setup (Anonymous Script 1 (line 3))
	(anonymous function) (p5.js:61891)
	(anonymous function) (p5.js:61826)
	p5 (p5.js:62131)
	(anonymous function) (demo.js:32)

[BernhardPoppe]

I can confirm this :/

[MichaelRexSchumacher]

Same here.

[nkymut]

I am trying to tracking down the causes but no luck.

here are things that I have tried so far,

1. adding conditional check for this.drawingContext.__clearCanvas(); at L78 p5.RendererSVG.ts

            if (this.drawingContext && this.drawingContext.__clearCanvas) {
                this.drawingContext.__clearCanvas()
            }

the change throws the following error

p5.js:64887 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading '_pixelDensity')
    at RendererSVG.resize (p5.js:64887:50)
    at RendererSVG.resize (p5.js:65540:77)
    at RendererSVG.RendererSVG.resize (p5.RendererSVG.ts:89:40)
    at Rendering.p5.createCanvas (rendering.ts:47:28)
    at setup (sketch.js:7:3)
    at _setup (p5.js:62711:25)
    at _runIfPreloadsAreDone (p5.js:62657:27)
    at p5._decrementPreload (p5.js:62668:25)
    at p5.<anonymous> (p5.sound.min.js:2:98292)

2. calling pg.createGraphics(w,h,SVG) to see if the error is only related to p5.createCanvas

throws following error.

rendering.ts:13 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'elt')
    at new Rendering.p5.Graphics (rendering.ts:13:36)
    at Rendering.p5.createGraphics (rendering.ts:54:16)
    at setup (sketch.js:9:8)
    at _setup (p5.js:62711:25)
    at _runIfPreloadsAreDone (p5.js:62657:27)
    at p5._decrementPreload (p5.js:62668:25)
    at p5.<anonymous> (p5.sound.min.js:2:98292)

looks like renderint.ts
not able to read 'this._renderer.elt'

export default function (p5: P5SVG) {
    // patch p5.Graphics for SVG
    const _graphics = p5.Graphics
    p5.Graphics = function (w: number, h: number, renderer: any, pInst: p5SVG) {
        const isSVG = renderer === constants.SVG
        _graphics.apply(this, [w, h, isSVG ? pInst.P2D : renderer, pInst])
        if (isSVG) {
            // replace <canvas> with <svg>
            console.log(this._renderer)
            let c = this._renderer.elt
            this._renderer = new p5.RendererSVG(c, this, false) // replace renderer
            c = this._renderer.elt
            this.elt = c // replace this.elt
            // do default again
            this._renderer.resize(w, h)
            this._renderer._applyDefaults()
        }
        return this
    }
    p5.Graphics.prototype = _graphics.prototype

3. Compare p5.createCanvas() and p5.createGraphics() changes from 1.6.0 to 1.8.0.

it seems 1.8.0 added canvas as the fourth argument of createGraphics,
and the renderer is checked if it is an instance of HTMLCanvasElement.
I'm not sure what these changes mean for the errors tough.

     _main.default.prototype.createGraphics = function (w, h, renderer, canvas) {
          if (arguments[2] instanceof HTMLCanvasElement) {
            renderer = constants.P2D;
            canvas = arguments[2];

Diff p5.createGraphics 1.6.0 -> 1.8.0
https://www.diffchecker.com/3fztP90g/

Diff p5.createCanvas 1.6.0 -> 1.8.0
https://www.diffchecker.com/dj3qidtE/

[golanlevin]

Just confirming that this error is still the case for p5.js v.1.9.0.

[CampbellOwen]

It appears this may be due to a difference in how the p5 source is bundled? The Renderer2D constructor now no longer directly mutates this as it did before:

function Renderer2D(elt, pInst, isMainCanvas) {
  var _this;
  _classCallCheck(this, Renderer2D);
  _this = _super.call(this, elt, pInst, isMainCanvas);
  _this.drawingContext = _this.canvas.getContext('2d');
  _this._pInst._setProperty('drawingContext', _this.drawingContext);
  return _this;
}

It works for me locally if in the file p5.RendererSVG.ts you change line 50 from

p5.Renderer2D.call(this, elt, pInstProxy, isMainCanvas)

to

Object.assign(this, p5.Renderer2D.call(this, elt, pInstProxy, isMainCanvas))

[nkymut]

Awesome, the change you suggested works on the editor.p5js.org with p5.js v.1.9.0 too - woo hoo🎉
https://editor.p5js.org/didny/sketches/-fk-owhPp

[lostPixels]

Confirmed working locally with p5.js v1.9.0 as well.

[xanderjl]

I'm curious if someone would be willing to publish their fork with this working change. I tried the same patch locally and published it to npm, but it wasn't performing as expected in my project 👀

[bcorporaal]

@xanderjl I have not forked it but if it helps, I have included a patched version in my Toko framework. That one works fine with p5.js v1.9.0.

[psicomante]

Hi guys,

I tried your fix and it's works just on p5.createCanvas but not on p5.createGraphics. I get the same error of @nkymut.

[nkymut]

I confirmed that p5.createGraphics causes the error at the following line in rendering.ts.

p5.js-svg/src/rendering.ts

Lines 51 to 53 in 553c2b2

	p5.prototype.createGraphics = function (w: number, h: number, renderer: any) {
	return new p5.Graphics(w, h, renderer, this)
	}

As @CampbellOwen suggested now Render2D is a class instead of a function since version 1.7.0,
this may be the core cause of the issue. I am not sure how this issue can be addressed still tho.

https://github.com/processing/p5.js/blob/d18386e5b85b18150826bf885a45e3d9728941ba/src/core/p5.Renderer2D.js#L14-L19

class Renderer2D extends p5.Renderer {
  constructor(elt, pInst, isMainCanvas) {
    super(elt, pInst, isMainCanvas);
    this.drawingContext = this.canvas.getContext('2d');
    this._pInst._setProperty('drawingContext', this.drawingContext);
  }

processing/p5.js@384e0eb

I've managed to run the tests on a forked branch for p5.js 1.9.0.
Filter-related codes are also showing errors.
https://nkymut.github.io/p5.js-svg/test/