Skia is a graphics engine developed in C++. Think of it as the building block for graphical interfaces, animations and everything else that involves displaying some 2D data on a screen, specially vectorial data.

For example, Flutter uses it to draw its UIs and Chrome uses it for almost everything, including rendering text parsed from HTML. Sublime Text, Firefox, Xamarin and many other projects also rely on Skia for the same sort of thing.

However, unlike, let's say, Qt or GTK+, Skia does not provide already done widgets (i.e., drop-in buttons, windows, text inputs etc.). It's like the fundamental building block on top of which you can create your buttons, animations and everything else and then display it on screen.

Now, CanvasKit is Skia ported to the browser via WebAssembly. Since Skia is a mature project and very performant (as you can guess from who is using it), it's now an alternative to Canvas API and DOM to render things on websites and will also let existing native applications to be ported to the web more easily.

I had a really hard time understanding it as well, and as someone who is supposed to at least have some understanding in this space (HTML5 gamedev) it made me feel a bit dumb.

However, from what I understand, there seems to be two things needed to be noted here:

Skia - a standardised library that can 'render' to different backends - i.e. it can render to OpenGL or SVG or PDFs.

CanvasKit (the actual one linked) - basically use Skia on the web (with webgl).

A huge boon here would be performance. For example, in WebGL, if you want to draw text, the current method is actually to render it in the canvas first, and reupload the texture to the GPU. From what I understand Skia seems to handle the rendering 'natively' so this step is not necessary. So basically it would just make it easier to draw 'primitives' since they are provided by the Skia API without having to do workarounds or writing really low level webgl fragments/shaders.

This is just from what I gathered, but yeah it is confusing. If anyone knowledgeable reads this, let me know if I got anything wrong!

Skia is just a 2D drawing API, like Cairo. It's what Chrome uses under the hood to render their whole UI I think, including (non-WebGL) HTML5 canvas stuff.

Why you would want to use this over HTML5 canvas? Good question. Maybe you want some features in Skia that aren't in the canvas API? Maybe you have a Skia app that you want to port to the web?

I can think of a use case. Writing a GPU accelerated text editor with syntax highlighting that can interface with a back end like neovim. Maybe not super useful but I could see myself doing this since my only expertise is with web technologies.

C/C++ for WebAssembly mainly used for porting existing C/C++ application to the web. I think it is one of them. You know what? Flutter uses Skia as a GUI backend. So maybe we could run a Flutter app using this someday.

I'm not sure if it's been publicly released but "project hemmingway" (I think) is Flutter for web. I've been following it for awhile.

This is for Skia devs to easily exchange code examples in the manner of JSFiddle.