Using the SkiaSharp graphics library in .NET

The news that the.NET UI framework Uno Platform project would be upstreaming features and fixes into the core multiplatform.NET libraries makes a lot of sense. The open source project has been working on cross-device.NET features for some time now, and deeper involvement with Microsoft on elements of.NET MAUI for Android and iOS builds on that existing relationship.

One of the interesting parts of the announcement was the news that Uno would begin co-maintaining the SkiaSharp project with Microsoft. This project is an important part of delivering cross-platform, portable.NET code, but most people don’t know about it as it’s part of the plumbing and hidden underneath libraries and components.

So, what is SkiaSharp and how can you use it in your own code?

Introducing SkiaSharp

Originally developed by Skia before being bought by Google in 2005, the once-proprietary 2D graphics library was released under a BSD license in 2008. Since then, the project has become a key element of many open source graphics systems, used in the Chromium browser engine, Mozilla’s tools, and Libre Office.

In Windows development, both Uno and Avalonia use it as a cross-platform drawing engine, helping your code work on desktop and on mobile devices. Versions are available for most common operating systems, including Windows, iOS, macOS, Linux, and Android.

The Skia 2D graphics library focuses on drawing and targeting most of the common back ends. As it is used as a common abstraction for different graphics APIs, it’s an ideal technology to help deliver cross-platform graphics operations, allowing code to produce the same visual output no matter the underlying display technology.

If you’re building C++ applications, you can work with a suitable port of Skia directly. But most of us use higher-level programming languages, like C#, along with cross-platform tools like Microsoft’s MAUI (Multi-platform App UI) to build applications that work on our choice of target environments. What’s needed is a way to use Skia from.NET, hence the SkiaSharp project.

SkiaSharp is currently lagging the Google build of Skia significantly and is based on the M118 build. This is currently about two years old, and while it still supports most of the requirements of.NET development, catching up with features would be good. Having extra eyes on pull requests and a focus on new technologies, like WebAssembly multitasking, should help move the platform forward and speed up development.

The foundations of.NET UI

Originally part of the Mono repository (and so used by Mono-based platforms like Xamarin), SkiaSharp gives you cross-platform bindings for various builds of the.NET platform with support for key technologies like WebAssembly and WinUI 3. Much of the time, this means you won’t be directly calling it; instead, you’re using a framework that has SkiaSharp render XAML components for you.

However, at times you need to get into the plumbing and build your own 2D graphics layer alongside familiar UI components. Perhaps you need a custom control that isn’t available, or you want to render images generated by, say, a CAD package or the output of a scientific computing application like a finite-element analysis mesh.

SkiaSharp and Linux

Like most.NET tools, SkiaSharp is available from NuGet, and can be installed from the.NET CLI. The development team takes care to point out that one library doesn’t fit all Linux distributions, and there are several official and community packages for specific target distributions and for x64 and Arm.

In practice, the core official Linux native package will work for popular Linuxes like Ubuntu, and the GitHub distribution provides tools to help you build your own releases on unsupported distributions. The SkiaSharp team has a mechanism for promoting community builds to the main release, based on popularity.

Building your own Linux tool requires cloning a couple of GitHub repositories from Mono and Google. A script ensures you have the right dependencies installed, and the library is compiled and built using the Ninja build tools. You can customize builds using arguments, for example, producing a C library rather than C++, or a version that doesn’t use a GPU.

Writing SkiaSharp code

You can find details of the SkiaSharp namespace on Microsoft Learn. Like most low-level libraries, there are a lot of classes; however, the basic approach to using SkiaSharp in your code is very similar to working with JavaScript’s 2D drawing tools, starting with a surface that hosts a canvas, where you then draw or render an image.

Looking at the namespace is more than a little intimidating, but using it in frameworks like MAUI is a lot easier than it first appears. Outside the base NuGet package, there are other higher-level packages that simplify working with SkiaSharp.

If you’re using MAUI, use the SkiaSharp.Views.Maui.Controls package. NuGet will install required dependencies when you install it through Visual Studio. You can now add the UseSkiaSharp method on a MauiAppBuilder object to start using its tools.

Once you have enabled SkiaSharp, your next step is to add a canvas to a page. By default, this fills the page, but you can use it in conjunction with other.NET controls using a XAML page description to lay out the controls. You can now add a drawing surface to the canvas, which holds the details of your 2D image. This can be a blank drawing surface or a pre-existing bitmap. Once you have a canvas, call the clear method on it to fill the canvas with your choice of color (the default is transparent).

Drawing on a SkiaSharp canvas

You can draw on the canvas with a paint object with a style and a color. Styles have associated parameters. For example, if you’re drawing a line with a stroke, you can choose the width of the line. Other options are a fill or a stroke and fill (which draws a line and fills its interior with a block of color).

With the canvas in place, you’re able to use SkiaSharp’s drawing primitives to add common shapes, like circles or rectangles. Other options support features like anti-aliasing, smoothing curves as needed. SkiaSharp has its own coordinate system, which may differ from that used by your choice of framework. It uses pixel-based measurements, so you will need to apply conversions to ensure that drawings are device-independent, using the canvas’ size property.

SkiaSharp’s low-level paint tools can animate images, redrawing them in different positions and with different colors. The development team recommends freeing up resources after each animation cycle, as doing it manually can be quicker than using.NET’s garbage collector.

Beyond shapes

Similar tools can render text on a canvas, painting the text in a chosen font, color, and size. Text is a graphical object like any other, so you can use the drawing tools to add special effects, such as only drawing text outlines. SkiaSharp can render bitmaps, with options for downloading, storing in local resource bundles as part of an application, or from the device directly. Again, you need your own scaling tools to display the image appropriately on the canvas.

Along with drawing primitives, there’s support for transforms that can help draw complex shapes from simple components. These allow you to move, scale, and rotate parts of a canvas. Other, more complex functions add effects that include color filters, alpha channel masks, blends, and shaders. Layering different effects and transformations on drawings and bitmaps gives you a lot of options, so you need a tool to help experiment with them.

Experimenting with Skia on the web

I wasn’t able to find a way to experiment directly with SkiaSharp code, though the Google Skia site provides a basic sandbox environment that mixes a web-based canvas with a REPL. Here you can write C++ Skia code and try out its options with a set of named “Fiddles” that provide sample operations that can easily be translated to.NET and to SkiaSharp.

Treating SkiaSharp like any other drawing API gives you plenty of flexibility, though it does require providing your own code for scaling to ensure images and text aren’t distorted. That’s to be expected, as it works at a much lower level than laying out controls on a XAML canvas. Here you’re doing all the work that WinUI 3 or Uno does for you, but building your own custom visualizations and controls, extending the platform the way you want and not having to rely on controls that don’t do what you need.