How to blend two images with blend() ?


I want to blend img1 and img2.

With Processing, I do :

img1.blend(img2, sx, sy, sw, sh, dx, dy, dw, dh, mode);

But with p5.js, its seems I can only blend with the canevas :

blend(img2, sx, sy, sw, sh, dx, dy, dw, dh, mode);

If I specify the destination, with the syntax


I get TypeError: this._renderer is undefined

However, It works fine with copy(). I can do

img1.copy(img2, ...)

Any ideas ?

Thank you.


  • edited December 2015

    You've just stumbled upon 1 of the most gross p5.js development buggy decisions! 3:-O

    In this particular case the "secret" fact that they "masquerade" to us what exactly datatype createGraphics() actually instantiates & returns to us:

    We may think that datatype is some of the subclasses of p5.Renderer, like createCanvas() returns:

    In a certain way yes, it is kinda p5.Renderer. But it's internally wrapped up by a p5.Graphics type:

    B/c of that 3rd useless extra wrapper type, some functions which would expect a p5.Renderer as their parameter won't directly recognize objects created outta createGraphics()! :O)

    In order to workaround that bad p5.js project's decision, we need to access the underlying p5.Renderer internally stored by that imbecile ad-hoc p5.Graphics.

    Let's say your img1 variable stores some object returned by createGraphics().
    Then you need to access "hidden private" property _renderer, which is the actual p5.Renderer object:, img2, sx, sy, sw, sh, dx, dy, dw, dh, mode);

    Notice that my hack above needed to rely on call() in order to pass img1 as blend()'s internal this: :ar!

  • Thank you for all those informations ^:)^

    I don't have the level (yet :-w ) to understand precisely the issue, but I get the essential (I hope [-O< )...

    However, your hack raises : TypeError: img1._renderer is undefined

    Did I miss something ?

  • There's no way to pinpoint what is exactly wrong if we dunno the datatype of both img1 & img2.
    That is, what expression was assigned to those 2 variables?
    Another very important detail: Which p5js version you're using?

Sign In or Register to comment.