Canvas plugin #1468

CedricGuillemet · 2025-02-25T08:55:34Z

Canvas plugin with more support for Web Canvas API
Test PG
Small change in Compiler Traverser to support bgfx bundled spirv (instead of our spirv fork) when building bgfx shader tool

Adds implementation for canvas `transform` function https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/transform

Add `fontBoundingBoxAscent` and `fontBoundingBoxDescent` to textMetrics

- Adds bindings for setting and getting `letterSpacing` https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/letterSpacing - Adds implementation for setter and getter

…nto CanvasTest

Co-authored-by: Ryan Tremblay <ryan.tremblay@microsoft.com>

…bylonNative into CanvasTest

- `lineCap` https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineCap - `lineJoin` https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineJoin - `miterLimit` https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/miterLimit --------- Co-authored-by: Cedric Guillemet <1312968+CedricGuillemet@users.noreply.github.com>

Gradient / color stop glue code and small example. ![image](https://github.com/user-attachments/assets/e8f54174-3887-40e9-a4a8-48a6f41a1b92)

… into CanvasTest # Conflicts: # Polyfills/Canvas/Source/Context.cpp

- https://developer.mozilla.org/en-US/docs/Web/API/Path2D Adds nanosvg.h for SVG path parsing. Known missing functionality: 1. `addPath` doesn't accept DOMMatrix transform 2. `roundRect` doesn't accept CSS-style radii array 3. `ellipse` doesn't handle clockwise Called from BabylonJS/Babylon.js#16221

…nto CanvasTest

- https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/getTransform - https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/setTransform - https://developer.mozilla.org/en-US/docs/Web/API/Path2D/addPath#transform usage: ``` // Path 2D let path = new _native.Path2D(); let path2 = new _native.Path2D("M 10,30 A 20, 20 0, 0, 1 50, 30 A 20, 20 0, 0, 1 90, 30 Q 90, 60 50, 90 Q 10, 60 10, 30 z"); path.addPath(path2, { a: 1, b: 0, c: 0, d: 1, e: 400, f: 0 }); // shift right 400 context.stroke(path); ```

…nto CanvasTest

… into CanvasTest

https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/roundRect Known Issues: - clipping round rect does not have rounded corners Co-authored-by: Cedric Guillemet <1312968+CedricGuillemet@users.noreply.github.com>

Small PR just so later PRs that require modifying nanovg have proper diffs

- allow NVGPaint to have 2 images (onlye used when text is mixed with gradient) - shader update ![image](https://github.com/user-attachments/assets/c0652079-5d45-49c8-acc6-1432c7928c46)

I'll need someone to generate the HSSL shader for me since I'm on Mac. Currently doesn't support blurred text but can add that in a future PR. --------- Co-authored-by: Cedric Guillemet <1312968+CedricGuillemet@users.noreply.github.com>

- Adds example Path2D usage in experience.js. - Makes Path2D work with .fill as well ![image](https://github.com/user-attachments/assets/18aef1c2-ea8e-48c6-b175-1c1e31e2c0d3) --------- Co-authored-by: Cedric Guillemet <1312968+CedricGuillemet@users.noreply.github.com>

MDN: https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/roundRect Implements CSS-style radius array argument ![image](https://github.com/user-attachments/assets/48ae0d13-fc96-4681-999a-3280f56268e5)

MDN: https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/direction MDN: https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/getTransform - Context direction is incomplete. Further investigation is needed on a solution to deal with ligatures (eg. stb_freetype + harfbuzz?) - Context getTransform() now returns missing DOMMatrix properties

…nto CanvasTest # Conflicts: # Polyfills/Canvas/Source/Canvas.cpp # Polyfills/Canvas/Source/Canvas.h # Polyfills/Canvas/Source/Context.cpp # Polyfills/Canvas/Source/Context.h

W3: https://www.w3.org/TR/SVG11/filters.html#feGaussianBlurElement - 13-tap gaussian blur for s < 2 - 3-pass box blur for s >= 2 Notes: - gaussian weights no longer hardcoded. we can optimize by caching weights. - box blur handles even vs odd kernel as per W3. sanity limit of 1000px. - edge sampling set to mirror. this avoids artifacts when blurring close to edge. Testing with even-case box blur d=8: `ctx.filter='blur(4px)'` ![image](https://github.com/user-attachments/assets/9b885a9e-c1d3-41c5-b14d-c77bdd2ecc63)

MDN: https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/roundRect Adds support for single DOMPoint argument in roundRect (Context, Path2D) Looks like `nvgRoundedRectVarying` already implemented seperate x/y radius, so just needed to add extra args ![image](https://github.com/user-attachments/assets/97ba3152-4d2d-4979-91cd-224200b28492)

@ryantrem

@ryantrem found that when we load in a replacement font buffer.. the old buffer passed to nvgCreateFontMem is freed and can get corrupted To solve this, we've made LoadTTFAsync effectively synchronous and don't allow loading in a duplicate font. We can consider future work to support safely updating existing fonts

small followup to #1516

…nto CanvasTest # Conflicts: # .github/jobs/test_install_win32.yml # Apps/UnitTests/Scripts/tests.js # Plugins/NativeEngine/CMakeLists.txt

CedricGuillemet · 2025-10-15T08:09:43Z

Comparison PG : https://playground.babylonjs.com/#TKVFSA

ryantrem

I think a lot of this has already been reviewed in the side branch, so mostly just commenting on some high level things related to bringing the code into master.

.github/jobs/test_install_win32.yml

ryantrem · 2025-10-15T16:07:00Z

Polyfills/Canvas/Source/nanovg/nanovg.h

Can we add a readme.md explaining where this OSS code came from and whether we have modified it?

And also how nanovg_babylon.* relates to the other files?

Polyfills/Canvas/Source/Context.cpp

Polyfills/Canvas/Source/Font.h

ryantrem · 2025-10-15T16:27:38Z

Polyfills/Canvas/Source/nanosvg.h

Maybe a readme.md explaining where this came from and if it has any Babylon modifications also?

bghgary · 2025-10-15T15:04:20Z

Plugins/NativeEngine/CMakeLists.txt

-    PRIVATE GraphicsDeviceContext
-    PRIVATE JsRuntime
-    PRIVATE SPIRV)
+if(BGFX_BUILD_TOOLS)


Can you explain this more? What's this for?

bgfx shaderc tool needed to be compiled to apply changes in nanovg shaders. But, BN and bgfx need different versions spirv/glslang with different dependencies.

Sorry, I still don't understand. What does bgfx's shaderc tool have to do with NativeEngine?

NativeEngine and shaderc both need glslang and spirv but of different versions (our forks vs bgfx repo fork). Both versions are incompatibles at build time but use the same target names.
Either disable NativeEngine build (and apps using it) when BGFX_BUILD_TOOLS is ON or make it compatible with both versions by changing its cmake and small patches in ShaderCompiler sources (what this PR does).

Polyfills/Canvas/Source/nanovg/nanovg_babylon.cpp

.github/jobs/test_install_win32.yml

Polyfills/Canvas/Source/Font.h

CedricGuillemet and others added 30 commits February 6, 2025 11:24

Canvas Context angle/fontsize fixes

0418e9f

Text/shape/state test script

bbdcce3

readme update

e0f88f3

Merge branch 'master' into CanvasTest

57ec8d7

Canvas transform implementation (#1460)

a9737fc

Adds implementation for canvas `transform` function https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/transform

plumb lineCap, lineJoin, miterLimit to nanovg

dadeca3

Add textMetrics implementation (#1461)

975e0dd

Add `fontBoundingBoxAscent` and `fontBoundingBoxDescent` to textMetrics

Add letterSpacing polyfill and implementation (#1462)

7bbca53

- Adds bindings for setting and getting `letterSpacing` https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/letterSpacing - Adds implementation for setter and getter

Merge branch 'master' of https://github.com/BabylonJS/BabylonNative i…

ef0b545

…nto CanvasTest

Canvas test update (#1463)

b733ab3

Co-authored-by: Ryan Tremblay <ryan.tremblay@microsoft.com>

map strings to lineCaps

bbe83fa

Merge branch 'CanvasLineImplementation' of https://github.com/Pheo/Ba…

c9be817

…bylonNative into CanvasTest

Gradient color stop (#1467)

aab744e

Gradient / color stop glue code and small example. ![image](https://github.com/user-attachments/assets/e8f54174-3887-40e9-a4a8-48a6f41a1b92)

Merge branch 'CanvasTest' of https://github.com/BabylonJS/BabylonNative…

d599479

… into CanvasTest # Conflicts: # Polyfills/Canvas/Source/Context.cpp

fix merge conflicts

4d03c02

JSI build

e404270

Merge branch 'master' of https://github.com/BabylonJS/BabylonNative i…

146210b

…nto CanvasTest

Merge branch 'master' of https://github.com/BabylonJS/BabylonNative i…

4c60d74

…nto CanvasTest

Merge branch 'CanvasTest' of https://github.com/BabylonJS/BabylonNative…

a4a0082

… into CanvasTest

Implement round rect (#1471)

de71606

https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/roundRect Known Issues: - clipping round rect does not have rounded corners Co-authored-by: Cedric Guillemet <1312968+CedricGuillemet@users.noreply.github.com>

Copy nanovg into Canvas sources (#1480)

7cb49ba

Small PR just so later PRs that require modifying nanovg have proper diffs

fixed MSVC build

e154eb9

Use bgfx more recent glslang/spirv for NativeEngine (#1478)

c914be2

fix mac build

2c1dcfe

Canvas gradient text (#1475)

f7a563d

- allow NVGPaint to have 2 images (onlye used when text is mixed with gradient) - shader update ![image](https://github.com/user-attachments/assets/c0652079-5d45-49c8-acc6-1432c7928c46)

Add strokeText support to canvas via SDFs (#1482)

58d3b2f

I'll need someone to generate the HSSL shader for me since I'm on Mac. Currently doesn't support blurred text but can add that in a future PR. --------- Co-authored-by: Cedric Guillemet <1312968+CedricGuillemet@users.noreply.github.com>

Pheo and others added 5 commits April 17, 2025 15:22

Canvas Path2D roundRect (#1501)

5abadc2

MDN: https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/roundRect Implements CSS-style radius array argument ![image](https://github.com/user-attachments/assets/48ae0d13-fc96-4681-999a-3280f56268e5)

Merge copy texture fix (#1505)

425bc34

Merge branch 'master' of https://github.com/BabylonJS/BabylonNative i…

dfb5a89

…nto CanvasTest # Conflicts: # Polyfills/Canvas/Source/Canvas.cpp # Polyfills/Canvas/Source/Canvas.h # Polyfills/Canvas/Source/Context.cpp # Polyfills/Canvas/Source/Context.h

missed bool NativeCanvas::UpdateRenderTarget()

d0eb88c

CedricGuillemet mentioned this pull request Apr 23, 2025

Fix texture copy when using multiple canvas #1481

Closed

Pheo and others added 6 commits April 28, 2025 09:02

Canvas synchronous LoadTTF (#1517)

068409d

small followup to #1516

Merge branch 'master' of https://github.com/BabylonJS/BabylonNative i…

981edd2

…nto CanvasTest # Conflicts: # .github/jobs/test_install_win32.yml # Apps/UnitTests/Scripts/tests.js # Plugins/NativeEngine/CMakeLists.txt

conflict

b20ce99

CedricGuillemet added 5 commits October 15, 2025 10:10

missing endif

1e55020

no member named 'floor' in namespace 'std'

7f39041

Canvas test

9e6c04a

empty line

8f0707e

disable canvas test on d3d12

45d6024

CedricGuillemet changed the title ~~Canvas test~~ Canvas plugin Oct 15, 2025

CedricGuillemet requested review from SergioRZMasson, bghgary, docEdub and ryantrem October 15, 2025 14:20

CedricGuillemet marked this pull request as ready for review October 15, 2025 14:28

ryantrem reviewed Oct 15, 2025

View reviewed changes

bghgary reviewed Oct 15, 2025

View reviewed changes

PR feedback

2b19c16

bghgary reviewed Oct 16, 2025

View reviewed changes

Polyfills/Canvas/Source/Font.h Outdated Show resolved Hide resolved

Polyfills/Canvas/Source/Font.h Outdated Show resolved Hide resolved

bghgary reviewed Oct 17, 2025

View reviewed changes

Polyfills/Canvas/Source/Font.h Outdated Show resolved Hide resolved

Canvas Readme update, PR feedback

f7a5100

Canvas plugin #1468

Are you sure you want to change the base?

Canvas plugin #1468

Uh oh!

Conversation

CedricGuillemet commented Feb 25, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

CedricGuillemet commented Oct 15, 2025

Uh oh!

ryantrem left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

ryantrem Oct 15, 2025

Choose a reason for hiding this comment

Uh oh!

ryantrem Oct 15, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

ryantrem Oct 15, 2025

Choose a reason for hiding this comment

Uh oh!

bghgary Oct 15, 2025

Choose a reason for hiding this comment

Uh oh!

CedricGuillemet Oct 16, 2025

Choose a reason for hiding this comment

Uh oh!

bghgary Oct 16, 2025

Choose a reason for hiding this comment

Uh oh!

CedricGuillemet Oct 20, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

7 participants

CedricGuillemet commented Feb 25, 2025 •

edited

Loading

CedricGuillemet Oct 20, 2025 •

edited

Loading