CODEWITHSUNDEEP
jquerycanvassvgsvg-filters
HelloWorld
HelloWorld

Reputation: 327

Can we apply a SVG filter to a specific portion of canvas element?

I was studying SVG and filters and then I had this thought: Can we apply filter to the specific portion of an element?

To be precise, have a look at: My home page

The squares are being drawn on two canvas on which flank the page. Now, as you can see there are a few squares which are below the main content. I want them to be blurred a bit so that it looks better.

My Idea: Apply SVG blur filter to only that part of canvas which is directly under the main content.

Any help is appreciated!

Upvotes: 3

Views: 2504

Answers (2)

Blindman67
Blindman67

Reputation: 54128

2D context filter property

You can apply some standard filters to the canvas via the 2D context filter property.

ctx.filter = "blur(5px)"

The filter is applied to newly rendered content, not to the existing content.

ctx.fillRect(10,10,20,10); // not blurred

ctx.filter = "blur (5px)";
ctx.fillRect(10,30,20,10); //blurred but first rect remains unblurred

There are some built in filters. The units are like CSS and must be post fixed. Lengths "px", percent "%", degree "deg"

You can also use SVG filters via a url. I have never tried to use that method but assume i will cover all the SVG filters available.

When I first used filter property it was very slow. But now I am using them in animations as performance is getting way better. But do be careful as they are not yet up to CSS and SVG performance, generally because of render management techniques.

List of canvas filter methods.

"url(url)" // url points to XML file containing SVG filter,
           // can be to anchor in SVG  to filter element.
"blur(length)"
"brightness(percentage)"
"contrast(percentage)"
"drop-shadow(offsetX, offsetY, blurRadius, color)"
"grayscale(percentage)"
'hue-rotate(degree)"
"invert(percentage)"
"opacity(percentage)"
"saturate(percentage)"
"sepia(percentage)"

*Note; filter is experimental, see MDN 2D context filter

Re SVG filter url() function. From MDN Sep 15, 2017

  • url(). The url() function takes the location of an XML file that specifies an SVG filter, and may include an anchor to a specific filter element.

Also see HTML Living Standard 4.12.5.1.19 Filters 3 October 2017

Upvotes: 4

Michael Mullany
Michael Mullany

Reputation: 31805

You can filter a sub-section of your content using a feFlood as a pseudo-clippath. The filter window is defined by the dimensions specified in the feFlood.

    <svg>
      <defs>
      <filter id="partblur" primitiveUnits="objectBoundingBox">
        <feFlood x="0.1" y="0.1" width="0.2" height="0.35"/>
        <feComposite operator="in" in="SourceGraphic"/>
        <feGaussianBlur stdDeviation="5"/>
        <feComposite operator="over" in2="SourceGraphic"/>
      </filter>
      </defs>
    </svg>

Upvotes: 1

Related Questions