W3C home > Mailing lists > Public > whatwg@whatwg.org > February 2016

Re: [whatwg] Support filters in Canvas

From: Ian Kilpatrick <ikilpatrick@chromium.org>
Date: Fri, 26 Feb 2016 08:35:12 -0800
Message-ID: <CAJL3UpSJcm0a93S6q-oU280equyGm8x1KFL+7vhOdqNbx6iNjw@mail.gmail.com>
To: Justin Novosad <junov@google.com>
Cc: WHATWG <whatwg@whatwg.org>, Ali Juma <ajuma@chromium.org>, mstange@themasta.com
Having an opaque handle (CanvasFilter) would be great for Houdini paint.

This would mean that when we plumb in a property of CSS type
<filter-function-list> the TypedOM can have an opaque handle to that
filter. I.e.

registerPaint('x', class {
  paint(ctx, styleMap) {
    const filter = styleMap.get('--my-filter').filter;
    // ...
    ctx.filter = filter; // \o/
    ctx.filter = 'url(#thing)'; // would fail for Houdini paint.
  }
});

It would make a lot of sense as wouldn't have to deal with paint time
resolving of url(), when happens when filter changes, etc.

This is similar to what we'd like to do with text (assigning an already
resolved FontFace or similar).

Ian

On Fri, Feb 26, 2016 at 8:20 AM, Justin Novosad <junov@google.com> wrote:

> On Fri, Feb 26, 2016 at 10:40 AM, Anne van Kesteren <annevk@annevk.nl>
> wrote:
>
> > On Fri, Feb 26, 2016 at 4:34 PM, Ali Juma <ajuma@chromium.org> wrote:
> > > The current canvas filters proposal [1] allows using SVG reference
> > filters
> > > defined in external documents (e.g. “url(file.svg#filter)”). Since the
> > > external document needs to be loaded before the filter can be applied,
> > > there’s a delay between setting the context’s filter attribute to such
> a
> > > filter and actually having the filter apply to drawing operations.
> >
> > 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.
> >
>
> Just thought of a way to solve this problem without new API. You can load
> the svg file as xml using XHR, and therefore guarantee the resource's
> continued availability thereafter. In order to make the filter node
> reachable for setting it as a canvas filter using the url() syntax, I think
> you'd have to pull it in to your HTML with something like:
> someLocalElement.innerHTML = new
> XMLSerializer().serializeToString(svgObtainedViaXHR.documentElement);
> I know this is gross (parse->serialize->re-parse), but I'm just saying
> there is a way (I think).
>
>
>
> > --
> > https://annevankesteren.nl/
> >
>
Received on Friday, 26 February 2016 16:35:43 UTC

This archive was generated by hypermail 2.3.1 : Friday, 26 February 2016 16:35:43 UTC