Skip to content
This repository has been archived by the owner on Jun 6, 2020. It is now read-only.

Initial support for CanvasKit / JavaScript version #1

Open
wants to merge 2 commits into
base: master
Choose a base branch
from

Conversation

jchavarri
Copy link
Member

@jchavarri jchavarri commented May 19, 2019

This adds some support for the JavaScript / CanvasKit version of SKIA.

Some notes / discoveries:

  • The wasm file that is exposed in canvaskit-wasm weights ~6.3MB (~2.2MB zipped), not 1MB like I originally thought. This means that a basic build with js_of_ocaml will be close to the 8 or 9 MB.
  • The way the library needs to be loaded is by calling a CanvasKitInit function, exposed in the JS file bin/canvaskit.js, and then passing the path to the wasm file as the params to this function, which returns a promise. This means that any code relying on CanvasKit needs to wait until these two files are loaded.

The way the jsoo bindings are being designed right now is assuming that CanvasKit exists already in the global namespace (i.e. both bin/canvaskit.js and bin/canvaskit.wasm have loaded). This makes the code in this repo much simpler but forces the consumers to load these two files manually on their own.

To test it:

cd example_js
esy
# open index.html in the browser

Screenshot from the example 😄

image

Copy link
Member Author

@jchavarri jchavarri left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@manuhornung Some comments or questions for you 😄 From my side, this is ready to merge, and I can keep adding more bindings + examples in other PRs, unless you think we should change anything :)

@@ -9,35 +9,35 @@ let imageInfo = Sk.ImageInfo.make(800, 600, N32, Premul, None);
let surface = Sk.Surface.makeRaster(imageInfo, None);
let canvas = Sk.Surface.getCanvas(surface);

let bgColor = Sk.Color.make(255, 100, 0, 200);
let bgColor = Sk.Color.makeARGB(255, 100, 0, 200);
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@manuhornung Changed this naming to make more clear which param is what (as CanvasKit has different ordering, I was going crazy 😄 )

"devDependencies": { "ocaml": "~4.7.0" }
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Using a more recent version of OCaml (same as Revery).

src/skia.cpp Outdated
CAMLprim value
caml_SkPath_create()
{
throw "caml_SkPath_create not implemented yet";
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@manuhornung Left these functions as todos. I couldn't compile without at least defining them in cpp too.

@@ -289,7 +301,10 @@ module Sk = {

external getCanvas: t => Canvas.t = "caml_SkSurface_getCanvas";

external makeCanvasSurface: string => t =
"caml_CanvasKit_MakeCanvasSurface";
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not sure if this should belong to CanvasKit or Surface 🤔

CAMLprim value
caml_CanvasKit_currentContext(value vCanvasId)
{
throw "caml_CanvasKit_MakeCanvasSurface is only available in CanvasKit / JavaScript bindings";
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@manuhornung Is there a better way to solve this?

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant