Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Support CanvasRenderingContext2D.filter #3793

Draft
wants to merge 1 commit into
base: main
Choose a base branch
from

Conversation

shallawa
Copy link
Contributor

@shallawa shallawa commented Aug 30, 2022

e873cb2

Support CanvasRenderingContext2D.filter
https://bugs.webkit.org/show_bug.cgi?id=198416
rdar://51303686

Reviewed by NOBODY (OOPS!).

This implements the canvas filter API. According to the specs, the filter will
be defined as a string very similar to the CSS filter definition. An SVG filter
can be accessed via a URL like this `filter : url(#id);`.

To implement this feature without many changes in the CanvasRenderingContext2D
code, the new class FilterTargetSwitcher will be added. In its constructor we
are going to switch the rendering context to a source ImageBuffer. The next draw
commands will be drawn to this ImageBuffer. In its destructor, the filter will
be applied to the source ImageBuffer and the result will be composited back to
the original context.

Specs link: https://html.spec.whatwg.org/multipage/canvas.html#canvasfilters

* LayoutTests/fast/canvas/canvas-filter-basics-expected.txt: Added.
* LayoutTests/fast/canvas/canvas-filter-basics.html: Added.
* LayoutTests/fast/canvas/canvas-filter-bounding-rect-expected.html: Added.
* LayoutTests/fast/canvas/canvas-filter-bounding-rect.html: Added.
* LayoutTests/fast/canvas/canvas-filter-drawing-expected.html: Added.
* LayoutTests/fast/canvas/canvas-filter-drawing.html: Added.
* LayoutTests/fast/canvas/canvas-filter-repaint-rect-expected.html: Added.
* LayoutTests/fast/canvas/canvas-filter-repaint-rect.html: Added.
* LayoutTests/fast/canvas/canvas-filter-save-restore-expected.html: Added.
* LayoutTests/fast/canvas/canvas-filter-save-restore.html: Added.
* LayoutTests/fast/canvas/resources/100x100-green-rect-filter-blur.svg: Added.
* LayoutTests/fast/canvas/resources/100x100-green-rect-filter-drop-shadow.svg: Added.
* LayoutTests/imported/w3c/web-platform-tests/html/canvas/element/filters/2d.filter.canvasFilterObject-expected.txt: Removed.
* LayoutTests/imported/w3c/web-platform-tests/html/canvas/element/filters/2d.filter.canvasFilterObject.blur.exceptions-expected.txt: Removed.
* LayoutTests/imported/w3c/web-platform-tests/html/canvas/element/filters/2d.filter.canvasFilterObject.colorMatrix-expected.txt: Removed.
* LayoutTests/imported/w3c/web-platform-tests/html/canvas/element/filters/2d.filter.canvasFilterObject.componentTransfer.discrete-expected.txt: Removed.
* LayoutTests/imported/w3c/web-platform-tests/html/canvas/element/filters/2d.filter.canvasFilterObject.componentTransfer.gamma-expected.txt: Removed.
* LayoutTests/imported/w3c/web-platform-tests/html/canvas/element/filters/2d.filter.canvasFilterObject.componentTransfer.identity-expected.txt: Removed.
* LayoutTests/imported/w3c/web-platform-tests/html/canvas/element/filters/2d.filter.canvasFilterObject.componentTransfer.linear-expected.txt: Removed.
* LayoutTests/imported/w3c/web-platform-tests/html/canvas/element/filters/2d.filter.canvasFilterObject.componentTransfer.table-expected.txt: Removed.
* LayoutTests/imported/w3c/web-platform-tests/html/canvas/element/filters/2d.filter.canvasFilterObject.convolveMatrix.exceptions-expected.txt: Removed.
* LayoutTests/imported/w3c/web-platform-tests/html/canvas/element/filters/2d.filter.canvasFilterObject.tentative-expected.txt:
* LayoutTests/imported/w3c/web-platform-tests/html/canvas/element/filters/2d.filter.value-expected.txt:
* LayoutTests/platform/gtk/imported/w3c/web-platform-tests/html/dom/idlharness.https-expected.txt:
* Source/WTF/Scripts/Preferences/UnifiedWebPreferences.yaml:
* Source/WebCore/Sources.txt:
* Source/WebCore/WebCore.xcodeproj/project.pbxproj:
* Source/WebCore/css/parser/CSSPropertyParserWorkerSafe.cpp:
(WebCore::CSSPropertyParserWorkerSafe::parseFilterString):
* Source/WebCore/css/parser/CSSPropertyParserWorkerSafe.h:
* Source/WebCore/html/canvas/CanvasFilterTargetSwitcher.cpp: Added.
(WebCore::CanvasFilterTargetSwitcher::CanvasFilterTargetSwitcher):
(WebCore::CanvasFilterTargetSwitcher::~CanvasFilterTargetSwitcher):
(WebCore::CanvasFilterTargetSwitcher::outsets const):
* Source/WebCore/html/canvas/CanvasFilterTargetSwitcher.h: Added.
* Source/WebCore/html/canvas/CanvasFilters.idl:
* Source/WebCore/html/canvas/CanvasRenderingContext2D.cpp:
(WebCore::CanvasRenderingContext2D::setFilterStringWithoutUpdatingStyle):
(WebCore::CanvasRenderingContext2D::createFilter const):
(WebCore::CanvasRenderingContext2D::calculateFilterOutsets const):
* Source/WebCore/html/canvas/CanvasRenderingContext2D.h:
* Source/WebCore/html/canvas/CanvasRenderingContext2DBase.cpp:
(WebCore::CanvasRenderingContext2DBase::State::State):
(WebCore::CanvasRenderingContext2DBase::setFilterString):
(WebCore::CanvasRenderingContext2DBase::fillInternal):
(WebCore::CanvasRenderingContext2DBase::strokeInternal):
(WebCore::CanvasRenderingContext2DBase::fillRect):
(WebCore::CanvasRenderingContext2DBase::strokeRect):
(WebCore::CanvasRenderingContext2DBase::drawImage):
(WebCore::CanvasRenderingContext2DBase::drawingContext const):
(WebCore::CanvasRenderingContext2DBase::inflatedStrokeRect const):
(WebCore::CanvasRenderingContext2DBase::drawTextUnchecked):
(WebCore::CanvasRenderingContext2DBase::inflateStrokeRect const): Deleted.
* Source/WebCore/html/canvas/CanvasRenderingContext2DBase.h:
(WebCore::CanvasRenderingContext2DBase::filterString const):
(WebCore::CanvasRenderingContext2DBase::setFilterTargetSwitcher):
(WebCore::CanvasRenderingContext2DBase::createFilter const):
(WebCore::CanvasRenderingContext2DBase::calculateFilterOutsets const):
(WebCore::CanvasRenderingContext2DBase::setFilterStringWithoutUpdatingStyle):
* Source/WebCore/platform/graphics/FloatRect.h:
(WebCore::operator+):
* Source/WebCore/platform/graphics/GraphicsContext.cpp:
(WebCore::GraphicsContext::copyState):
* Source/WebCore/platform/graphics/GraphicsContext.h:
* Source/WebCore/platform/graphics/GraphicsContextState.cpp:
(WebCore::GraphicsContextState::mergeAllChanges):
(WebCore::GraphicsContextState::copyChanges):
* Source/WebCore/platform/graphics/GraphicsContextState.h:

e873cb2

Misc iOS, tvOS & watchOS macOS Linux Windows
βœ… πŸ§ͺ style βœ… πŸ›  ios βœ… πŸ›  mac βœ… πŸ›  wpe βœ… πŸ›  wincairo
βœ… πŸ§ͺ bindings βœ… πŸ›  ios-sim βœ… πŸ›  mac-AS-debug βœ… πŸ§ͺ wpe-wk2
βœ… πŸ§ͺ webkitperl ❌ πŸ§ͺ ios-wk2 βœ… πŸ§ͺ api-mac βœ… πŸ›  gtk
❌ πŸ§ͺ ios-wk2-wpt ❌ πŸ§ͺ mac-wk1 ❌ πŸ§ͺ gtk-wk2
βœ… πŸ›  πŸ§ͺ jsc βœ… πŸ§ͺ api-ios ❌ πŸ§ͺ mac-wk2 βœ… πŸ§ͺ api-gtk
βœ… πŸ›  πŸ§ͺ jsc-arm64 βœ… πŸ›  tv ❌ πŸ§ͺ mac-AS-debug-wk2 βœ… πŸ›  jsc-armv7
βœ… πŸ›  tv-sim ❌ πŸ§ͺ mac-wk2-stress βœ… πŸ§ͺ jsc-armv7-tests
βœ… πŸ›  watch βœ… πŸ›  jsc-mips
βœ… πŸ›  watch-sim βœ… πŸ§ͺ jsc-mips-tests

@shallawa shallawa self-assigned this Aug 30, 2022
@shallawa shallawa added Canvas Bugs related to the canvas element. WebKit Nightly Build labels Aug 30, 2022
@webkit-ews-buildbot webkit-ews-buildbot added the merging-blocked Applied to prevent a change from being merged label Aug 30, 2022
@shallawa shallawa removed the merging-blocked Applied to prevent a change from being merged label Aug 30, 2022
@shallawa shallawa force-pushed the eng/Support-CanvasRenderingContext2D-filter branch from a8c57ff to a4e5558 Compare August 30, 2022 17:10
@webkit-ews-buildbot webkit-ews-buildbot added the merging-blocked Applied to prevent a change from being merged label Aug 30, 2022
@shallawa shallawa marked this pull request as draft August 30, 2022 22:22
@shallawa shallawa removed the merging-blocked Applied to prevent a change from being merged label Oct 14, 2022
@shallawa shallawa force-pushed the eng/Support-CanvasRenderingContext2D-filter branch from a4e5558 to ee56e3d Compare October 14, 2022 00:35
@webkit-ews-buildbot webkit-ews-buildbot added the merging-blocked Applied to prevent a change from being merged label Oct 14, 2022
@shallawa shallawa removed the merging-blocked Applied to prevent a change from being merged label Oct 14, 2022
@shallawa shallawa force-pushed the eng/Support-CanvasRenderingContext2D-filter branch from ee56e3d to e874780 Compare October 14, 2022 18:51
@webkit-ews-buildbot webkit-ews-buildbot added the merging-blocked Applied to prevent a change from being merged label Oct 14, 2022
@shallawa shallawa removed the merging-blocked Applied to prevent a change from being merged label Oct 16, 2022
@shallawa shallawa force-pushed the eng/Support-CanvasRenderingContext2D-filter branch from e874780 to 7a2a1cc Compare October 16, 2022 23:32
@shallawa shallawa force-pushed the eng/Support-CanvasRenderingContext2D-filter branch from 7a2a1cc to 9b0fc35 Compare October 17, 2022 00:07
@webkit-ews-buildbot webkit-ews-buildbot added the merging-blocked Applied to prevent a change from being merged label Oct 17, 2022
@shallawa shallawa requested a review from anttijk October 17, 2022 04:03
@shallawa shallawa removed the merging-blocked Applied to prevent a change from being merged label Oct 17, 2022
@shallawa shallawa force-pushed the eng/Support-CanvasRenderingContext2D-filter branch from 9b0fc35 to 674c212 Compare October 17, 2022 21:38
@webkit-ews-buildbot webkit-ews-buildbot added the merging-blocked Applied to prevent a change from being merged label Oct 18, 2022
@MAKIO135
Copy link

any ETA?

@AugustusZ
Copy link

Any updates on this? Thanks

@shallawa shallawa removed the merging-blocked Applied to prevent a change from being merged label Jul 1, 2023
@shallawa shallawa force-pushed the eng/Support-CanvasRenderingContext2D-filter branch from 674c212 to f565fdd Compare July 1, 2023 01:35
@webkit-ews-buildbot webkit-ews-buildbot added the merging-blocked Applied to prevent a change from being merged label Jul 1, 2023
@shallawa shallawa removed the merging-blocked Applied to prevent a change from being merged label Jul 1, 2023
@shallawa shallawa force-pushed the eng/Support-CanvasRenderingContext2D-filter branch from f565fdd to 30e431f Compare July 1, 2023 15:49
@webkit-ews-buildbot webkit-ews-buildbot added the merging-blocked Applied to prevent a change from being merged label Jul 1, 2023
https://bugs.webkit.org/show_bug.cgi?id=198416
rdar://51303686

Reviewed by NOBODY (OOPS!).

This implements the canvas filter API. According to the specs, the filter will
be defined as a string very similar to the CSS filter definition. An SVG filter
can be accessed via a URL like this `filter : url(#id);`.

To implement this feature without many changes in the CanvasRenderingContext2D
code, the new class FilterTargetSwitcher will be added. In its constructor we
are going to switch the rendering context to a source ImageBuffer. The next draw
commands will be drawn to this ImageBuffer. In its destructor, the filter will
be applied to the source ImageBuffer and the result will be composited back to
the original context.

Specs link: https://html.spec.whatwg.org/multipage/canvas.html#canvasfilters

* LayoutTests/fast/canvas/canvas-filter-basics-expected.txt: Added.
* LayoutTests/fast/canvas/canvas-filter-basics.html: Added.
* LayoutTests/fast/canvas/canvas-filter-bounding-rect-expected.html: Added.
* LayoutTests/fast/canvas/canvas-filter-bounding-rect.html: Added.
* LayoutTests/fast/canvas/canvas-filter-drawing-expected.html: Added.
* LayoutTests/fast/canvas/canvas-filter-drawing.html: Added.
* LayoutTests/fast/canvas/canvas-filter-repaint-rect-expected.html: Added.
* LayoutTests/fast/canvas/canvas-filter-repaint-rect.html: Added.
* LayoutTests/fast/canvas/canvas-filter-save-restore-expected.html: Added.
* LayoutTests/fast/canvas/canvas-filter-save-restore.html: Added.
* LayoutTests/fast/canvas/resources/100x100-green-rect-filter-blur.svg: Added.
* LayoutTests/fast/canvas/resources/100x100-green-rect-filter-drop-shadow.svg: Added.
* LayoutTests/imported/w3c/web-platform-tests/html/canvas/element/filters/2d.filter.canvasFilterObject-expected.txt: Removed.
* LayoutTests/imported/w3c/web-platform-tests/html/canvas/element/filters/2d.filter.canvasFilterObject.blur.exceptions-expected.txt: Removed.
* LayoutTests/imported/w3c/web-platform-tests/html/canvas/element/filters/2d.filter.canvasFilterObject.colorMatrix-expected.txt: Removed.
* LayoutTests/imported/w3c/web-platform-tests/html/canvas/element/filters/2d.filter.canvasFilterObject.componentTransfer.discrete-expected.txt: Removed.
* LayoutTests/imported/w3c/web-platform-tests/html/canvas/element/filters/2d.filter.canvasFilterObject.componentTransfer.gamma-expected.txt: Removed.
* LayoutTests/imported/w3c/web-platform-tests/html/canvas/element/filters/2d.filter.canvasFilterObject.componentTransfer.identity-expected.txt: Removed.
* LayoutTests/imported/w3c/web-platform-tests/html/canvas/element/filters/2d.filter.canvasFilterObject.componentTransfer.linear-expected.txt: Removed.
* LayoutTests/imported/w3c/web-platform-tests/html/canvas/element/filters/2d.filter.canvasFilterObject.componentTransfer.table-expected.txt: Removed.
* LayoutTests/imported/w3c/web-platform-tests/html/canvas/element/filters/2d.filter.canvasFilterObject.convolveMatrix.exceptions-expected.txt: Removed.
* LayoutTests/imported/w3c/web-platform-tests/html/canvas/element/filters/2d.filter.canvasFilterObject.tentative-expected.txt:
* LayoutTests/imported/w3c/web-platform-tests/html/canvas/element/filters/2d.filter.value-expected.txt:
* LayoutTests/platform/gtk/imported/w3c/web-platform-tests/html/dom/idlharness.https-expected.txt:
* Source/WTF/Scripts/Preferences/UnifiedWebPreferences.yaml:
* Source/WebCore/Sources.txt:
* Source/WebCore/WebCore.xcodeproj/project.pbxproj:
* Source/WebCore/css/parser/CSSPropertyParserWorkerSafe.cpp:
(WebCore::CSSPropertyParserWorkerSafe::parseFilterString):
* Source/WebCore/css/parser/CSSPropertyParserWorkerSafe.h:
* Source/WebCore/html/canvas/CanvasFilterTargetSwitcher.cpp: Added.
(WebCore::CanvasFilterTargetSwitcher::CanvasFilterTargetSwitcher):
(WebCore::CanvasFilterTargetSwitcher::~CanvasFilterTargetSwitcher):
(WebCore::CanvasFilterTargetSwitcher::outsets const):
* Source/WebCore/html/canvas/CanvasFilterTargetSwitcher.h: Added.
* Source/WebCore/html/canvas/CanvasFilters.idl:
* Source/WebCore/html/canvas/CanvasRenderingContext2D.cpp:
(WebCore::CanvasRenderingContext2D::setFilterStringWithoutUpdatingStyle):
(WebCore::CanvasRenderingContext2D::createFilter const):
(WebCore::CanvasRenderingContext2D::calculateFilterOutsets const):
* Source/WebCore/html/canvas/CanvasRenderingContext2D.h:
* Source/WebCore/html/canvas/CanvasRenderingContext2DBase.cpp:
(WebCore::CanvasRenderingContext2DBase::State::State):
(WebCore::CanvasRenderingContext2DBase::setFilterString):
(WebCore::CanvasRenderingContext2DBase::fillInternal):
(WebCore::CanvasRenderingContext2DBase::strokeInternal):
(WebCore::CanvasRenderingContext2DBase::fillRect):
(WebCore::CanvasRenderingContext2DBase::strokeRect):
(WebCore::CanvasRenderingContext2DBase::drawImage):
(WebCore::CanvasRenderingContext2DBase::drawingContext const):
(WebCore::CanvasRenderingContext2DBase::inflatedStrokeRect const):
(WebCore::CanvasRenderingContext2DBase::drawTextUnchecked):
(WebCore::CanvasRenderingContext2DBase::inflateStrokeRect const): Deleted.
* Source/WebCore/html/canvas/CanvasRenderingContext2DBase.h:
(WebCore::CanvasRenderingContext2DBase::filterString const):
(WebCore::CanvasRenderingContext2DBase::setFilterTargetSwitcher):
(WebCore::CanvasRenderingContext2DBase::createFilter const):
(WebCore::CanvasRenderingContext2DBase::calculateFilterOutsets const):
(WebCore::CanvasRenderingContext2DBase::setFilterStringWithoutUpdatingStyle):
* Source/WebCore/platform/graphics/FloatRect.h:
(WebCore::operator+):
* Source/WebCore/platform/graphics/GraphicsContext.cpp:
(WebCore::GraphicsContext::copyState):
* Source/WebCore/platform/graphics/GraphicsContext.h:
* Source/WebCore/platform/graphics/GraphicsContextState.cpp:
(WebCore::GraphicsContextState::mergeAllChanges):
(WebCore::GraphicsContextState::copyChanges):
* Source/WebCore/platform/graphics/GraphicsContextState.h:
@shallawa shallawa removed the merging-blocked Applied to prevent a change from being merged label Jul 1, 2023
@shallawa shallawa force-pushed the eng/Support-CanvasRenderingContext2D-filter branch from 30e431f to e873cb2 Compare July 1, 2023 16:27
@webkit-ews-buildbot webkit-ews-buildbot added the merging-blocked Applied to prevent a change from being merged label Jul 1, 2023
@mercuryVM
Copy link

Any updates?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Canvas Bugs related to the canvas element. merging-blocked Applied to prevent a change from being merged
Projects
None yet
7 participants