skia2/site/user/modules/canvaskit.md
Brian Osman 767f444feb SkRuntimeEffect SkSL has a new signature for main()
There is no more 'inout half4 color'. Effects return their output color.
If an effect wants the input color, it must use the (already existing)
approach of sampling a nullptr input shader.

The change is guarded for Chromium (so we can update their runtime color
filters in skia_renderer.cc).

For the GPU backend, FPs can now override usesExplicitReturn to indicate
that their emitCode will generate a return statement. If that's true,
then writeProcessorFunction doesn't inject the automatic return of the
output color, and emitFragProc will *always* wrap that FP in a helper
function, even as a top-level FP. GrSkSLFP opts in to this behavior, so
that the user-supplied return becomes the actual return in the FP's
emitCode.

Adapting the skvm code to this wasn't too bad: It looks fragile (what
happens if there are multiple returns?), but that's not really possible
today, without varying control flow.

Bug: skia:10613

Change-Id: I205b81fd87dd32bab30b6d6d5fc78853485da036
Reviewed-on: https://skia-review.googlesource.com/c/skia/+/310756
Commit-Queue: Brian Osman <brianosman@google.com>
Reviewed-by: Kevin Lubick <kjlubick@google.com>
Reviewed-by: John Stiles <johnstiles@google.com>
Reviewed-by: Brian Salomon <bsalomon@google.com>
Reviewed-by: Mike Klein <mtklein@google.com>
2020-08-25 13:36:28 +00:00

30 KiB

CanvasKit - Skia + WebAssembly

Skia now offers a WebAssembly build for easy deployment of our graphics APIs on the web.

CanvasKit provides a playground for testing new Canvas and SVG platform APIs, enabling fast-paced development on the web platform. It can also be used as a deployment mechanism for custom web apps requiring cutting-edge features, like Skia's Lottie animation support.

Features

  • WebGL context encapsulated as an SkSurface, allowing for direct drawing to an HTML canvas
  • Core set of Skia canvas/paint/path/text APIs available, see bindings
  • Draws to a hardware-accelerated backend
  • Security tested with Skia's fuzzers

Samples

Paragraph shaping, custom shaders, and perspective transformation

SkParagraph JSFiddle
Shader JSFiddle
3D Cube JSFiddle

Play back bodymovin lottie files with skottie (click for fiddles)

Go beyond the HTML Canvas2D

Star JSFiddle
Ink JSFiddle

Lottie files courtesy of the lottiefiles.com community: Lego Loader, I'm thirsty, Confetti, Onboarding

Test server

Test your code on our CanvasKit Fiddle

Download

Get CanvasKit on NPM