# How to correcly apply SVG filters on the canvas?

**URL:** <https://discourse.processing.org/t/how-to-correcly-apply-svg-filters-on-the-canvas/19347>\
**Category:** Coding Questions\
**Created:** [April 2, 2020, 6:19pm UTC](https://discourse.processing.org/t/how-to-correcly-apply-svg-filters-on-the-canvas/19347 "2020-04-02T18:19:16Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![solub](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/solub/32/333_2.png) [@solub](https://discourse.processing.org/u/solub)\
**Post date:** [April 2, 2020, 6:19pm UTC](https://discourse.processing.org/t/how-to-correcly-apply-svg-filters-on-the-canvas/19347/1 "2020-04-02T18:19:16Z")

</div>

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:

```auto
<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](https://editor.p5js.org/solub/sketches/T3_SxapnQ) 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)

---

<div class="post-metadata">

**Author:** ![solub](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/solub/32/333_2.png) [@solub](https://discourse.processing.org/u/solub)\
**Post date:** [April 3, 2020, 5:37pm UTC](https://discourse.processing.org/t/how-to-correcly-apply-svg-filters-on-the-canvas/19347/2 "2020-04-03T17:37:24Z")

</div>

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](https://editor.p5js.org/joshlory/sketches/HkH6IjRjm) people storing all the html code as a string in a variable and calling `encodeURIComponent()` on it.

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

encodeURIComponent(s)

```

And maybe playing with [p5.Element](https://p5js.org/reference/#/p5.Element) or [elt](https://p5js.org/reference/#/p5.Element/elt)… as well ?

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