How to correcly apply SVG filters on the canvas?

p5.js Coding Questions
1

Hi,

I am trying to apply a SVG filter on a sketch by accessing the context of the canvas (ctx = canvas.getContext("2d")) and pasting the following in the index.html file:

<div id="stats"></div>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
    <filter id="goo">
      <fegaussianBlur in="SourceGraphic" stddeviation="10" result="blur" />
      <fecolormatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -7"/>
    </filter>
  </defs>
</svg>

While this seems to work I notice that:

  • the position of the canvas has changed (lower than usually)
  • calling background() breaks the effect

Would someone be kind enough to explain why these changes occur and how to prevent / overcome them ? (changing the background color / setting the canvas correctly)

1 Like
2

Also, is it possible to keep the index.html file as it is (unchanged) and directly insert the HTML code above in the sketch instead ?

I have seen people storing all the html code as a string in a variable and calling encodeURIComponent() on it.

var s = '<svg xmlns="http://www.w3.org/2000/svg" ... </svg>' 

encodeURIComponent(s)

And maybe playing with p5.Element or elt… as well ?

Sorry if that doesn’t make sense, all of this is really new to me.

1 Like