# SkiaSharp

SkiaSharp is a 2D graphics system for .NET powered by the open-source Skia graphics engine that is used extensively in Google products. You can use SkiaSharp in your Xamarin.Forms applications to draw 2D vector graphics, bitmaps, and text.

The nuget [`Fabulous.XamarinForms.SkiaSharp`](https://www.nuget.org/packages/Fabulous.XamarinForms.SkiaSharp) implements a view component for the type [SKCanvasView](https://developer.xamarin.com/api/type/SkiaSharp.Views.Forms.SKCanvasView/).

<figure><img src="/files/jZiI6AuBZPyS0YzNNgo3" alt=""><figcaption></figcaption></figure>

To use `Fabulous.XamarinForms.SkiaSharp`, you must

1. Add a reference to `SkiaSharp.Views.Forms` across your whole solution. This will add appropriate references to your platform-specific Android and iOS projects too.
2. Next add a reference to `Fabulous.XamarinForms.SkiaSharp` across your whole solution.

After these steps you can use SkiaSharp in your view function. Here is a simple example of using SkiaSharp to draw a circle and respond to touch events:

```fsharp
open Fabulous.XamarinForms

View.SKCanvasView(enableTouchEvents = true,
    paintSurface = (fun args ->
        let info = args.Info
        let surface = args.Surface
        let canvas = surface.Canvas

        canvas.Clear()
        use paint = new SKPaint(Style = SKPaintStyle.Stroke, Color = Color.Red.ToSKColor(), StrokeWidth = 25.0f)
        canvas.DrawCircle(float32 (info.Width / 2), float32 (info.Height / 2), 100.0f, paint)
    ),
    touch = (fun args ->
        printfn "touch event at (%f, %f)" args.Location.X args.Location.Y
    )
)
```

By default, the view will not be redrawn when the model changes. You should set `invalidate` to true when you know that a redraw is needed. Set it back to false when done, otherwise it will be redrawn at each update.

```fsharp
View.SKCanvasView(..., invalidate = true)
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.fabulous.dev/xamarinforms/extensions/skiasharp.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.