Re: [whatwg] Support filters in Canvas

From: whatwg [mailto:whatwg-bounces@lists.whatwg.org] On Behalf Of Anne van Kesteren

> Perhaps we could support assigning an SVG filter directly (as an object)? Developers would be responsible to load them if they're external. Adding yet another network API that's a thin layer on top of some CSS syntax seems a little hackish. I'd prefer if we exposed filters at a lower level somehow.

I tend to agree. I don't like that the filter property is now sometimes a string, sometimes a CanvasFilter.

Maybe something like `setFilter((DOMString or CanvasFilter) filter)` with the readonly `filter` property returning a CanvasFilter all the time? This would involve fleshing out CanvasFilter a bit. Strawman:

const filter1 = new CanvasFilter("contrast(50%) blur(3px)");

// filter1 looks like { value: "contrast(50%) blur(3px)", loadedFrom: null }

CanvasFilter.load("file.svg#blur").then(filter2 => {
  // filter2 looks like { value: null, loadedFrom: "file.svg#blur" }

  ctx.setFilter(filter1);
  ctx.strokeText("Canvas", 50, 500);
  
  assert(ctx.filter === filter1);
  
  ctx.setFilter(filter2);
  ctx.strokeText("Filters", 50, 100);
  
  assert(ctx.filter === filter2);
  
  ctx.setFilter(filter3);
  ctx.strokeText("SVG", 50, 200);
});

This doesn't really solve Anne's concerns about a new networking API, but I am not sure how to do that given that fragments are involved (which are not a networking concept, really). Maaaybe you could do something like

fetch("file.svg").then(res => res.blob()).then(blob => {
  const filter2 = CanvasFilter.fromSVG(blob, "#blur");
  // ...
});

---

Alternately, is it possible to generically represent a loaded SVG filter as a string? Browsing the linked thread it seems unlikely as it may involve further external resource fetches etc. But that would help some design space.

Received on Friday, 26 February 2016 16:15:28 UTC