Map C++ Skia-Commands to CanvasKit API for a WebPage being Rendered in Chromium

[Steven Whelan]

Hi, I am trying to Intercept Skia Commands from Chromium to replay them on another browser using CanvasKit+WebAssembly.

Given that I am able to get all SKIA Operations being performed for Rendering the page, how will I identify which CanvasKit API to call for which C++ function?

Example Being

One of the commands SKIA commands recorded in my trace.json is as below,

But I was not able to find a correcpoinding CanvaskitAPI for the same.

{"args":{},"cat":"disabled-by-default-skia","name":"void __cdecl SkCanvas::experimental_DrawEdgeAAQuad(const SkRect &, const SkPoint *, QuadAAFlags, const SkColor4f &, SkBlendMode)","ph":"I","pid":5940,"s":"t","tid":20736,"ts":95855710785}

[John Stiles]

CanvasKit does not expose every Skia API, and especially not experimental ones. 

This API which draws a clipped, antialiased rectangle. By reading the docs you can get a good feel for how to emulate its behavior:

     * This is an experimental API for the SkiaRenderer Chromium project, and its API will surely

     * evolve if it is not removed outright.

     *

     * This behaves very similarly to drawRect() combined with a clipPath() formed by clip

     * quadrilateral. 'rect' and 'clip' are in the same coordinate space. If 'clip' is null, then it

     * is as if the rectangle was not clipped (or, alternatively, clipped to itself). If not null,

     * then it must provide 4 points.

     *

     * In addition to combining the draw and clipping into one operation, this function adds the

     * additional capability of controlling each of the rectangle's edges anti-aliasing

     * independently.  The edges of the clip will respect the per-edge AA flags. It is required that

     * 'clip' be contained inside 'rect'. In terms of mapping to edge labels, the 'clip' points

     * should be ordered top-left, top-right, bottom-right, bottom-left so that the edge between [0]

     * and [1] is "top", [1] and [2] is "right", [2] and [3] is "bottom", and [3] and [0] is "left".

     * This ordering matches SkRect::toQuad().

     *

     * This API only draws solid color, filled rectangles so it does not accept a full SkPaint.

--
You received this message because you are subscribed to the Google Groups "skia-discuss" group.
To unsubscribe from this group and stop receiving emails from it, send an email to skia-discuss...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/skia-discuss/d45459d4-daef-4521-b13b-bd7a88173450n%40googlegroups.com.

[Steven Whelan]

Is there any document that tells which canvaskit APIs(if they exist) are mapped to which c++ skia function?

If I have a trace.json that logs skia commands used by chromium browser, could you suggest whatwould be the best way to convert these SKIA commands to canvaskit API calls?

Thanks

You received this message because you are subscribed to a topic in the Google Groups "skia-discuss" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/skia-discuss/9SzGenZ-BYA/unsubscribe.
To unsubscribe from this group and all its topics, send an email to skia-discuss...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/skia-discuss/CANBPXuBO24wY7tQstwDhN%3D0bbdERoiuWsO%2BstYhosy-sp%2B%2Bcyg%40mail.gmail.com.

[Brian Osman]

Other than looking at the bindings, not really. You are definitely going to find lots of APIs that aren't present, or where the mapping isn't obvious. I'm curious: Can you skip CanvasKit and move more code into WASM? In other words, rather than using the (limited) CanvasKit JS API, just call Skia's "native" API in your WASM bundle? This ensures you have access to every API, and is likely to be faster, too.

To view this discussion on the web visit https://groups.google.com/d/msgid/skia-discuss/CAO%2BCLgDrywbfeXNMCC6L3O0pmfHpOzTCMq15XQF-99%2BErTfPLA%40mail.gmail.com.

[John Stiles]

Brian beat me to it—going direct to native Skia is the better bet and gives you the entire API.

To answer your initial question, the bindings-to-native-Skia code is implemented here: https://source.chromium.org/chromium/chromium/src/+/main:third_party/skia/modules/canvaskit/canvaskit_bindings.cpp;l=1042;drc=1c17b3db67443687b295ca00410453ddb1610547

It's the canonical answer to "which APIs are implemented and how".

To view this discussion on the web visit https://groups.google.com/d/msgid/skia-discuss/CAMcBjo6nreCbBdKOntKNKuZpcGd4cw9KE7AL8%2BB0SvPTwVDqEQ%40mail.gmail.com.

[Steven Whelan]

To be able to use SKIA without JavaScript binding, do I need to compile skia to wasm or there already is a skia wasm available- just like we have one for canvaskit as used in the canvaskit tutorial.

To view this discussion on the web visit https://groups.google.com/d/msgid/skia-discuss/CANBPXuBUY%3DnmmA5x76fXzZWOBbbTX7O5c4tbOHX_Z0i4uxNHnQ%40mail.gmail.com.

[Данил Буланов]

If you need a simple example, you can have a look at what is canvaskit (modules/canvaskit), it is just a bunch of bindings, and then write your own binding which accepts some parameters on which to decide which skia function to call and then calls an appropriate function, and then use this modified version of canvaskit to see if it works

понедельник, 15 апреля 2024 г. в 11:54:09 UTC+3, stevenw...@gmail.com:

[Steven Whelan]

Thank you for the response

I have gone through the canvaskit example.

I am advised above to use SKIA API directly through wasm without bindings to avoid the limitations of Canvaskit.

Do I still need to create bindings of my own?

Can I not load the wasm directly and call the skia like library?

To view this discussion on the web visit https://groups.google.com/d/msgid/skia-discuss/050b79b8-ba04-4da4-9536-e41f804e0c5bn%40googlegroups.com.