> For the complete documentation index, see [llms.txt](https://docs.flatredball.com/flatredball/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.flatredball.com/flatredball/api/skiagum/renderables/renderableskiaobject.md).

# RenderableSkiaObject

### Introduction

RenderableSkiaObject provides common implementation for rendering Skia graphics in the Gum rendering system. This class simplifies the implementation of interfaces necessary to render Skia objects. It also provides implementation for interfaces so it can be used as a renderable object by Gum objects (GraphicalUiElement). Custom classes can inherit from RenderableSkiaObject to provide custom Skia rendering code, which is useful for custom situations which are not supported by Gum.

### Code Example - Rendering a Circle in Code

The following class provides an example of how to inherit from RenderableSkiaObject to provide custom rendering:

```
public class CustomRenderable : RenderableSkiaObject
{
    public override void DrawToSurface(SKSurface surface)
    {
        // Any skia code works here, but we'll draw an orange circle as an example:
        var canvas = surface.Canvas;

        using var paint = new SKPaint();
        paint.Color = SKColors.Orange;

        var radius = Width/2;
        canvas.DrawCircle(new SKPoint(radius, radius), radius, paint);
    }
}
```

This object can be used as a standalone object or it can be added to a Gum GraphicalUiElement. Adding to a GraphicalUiElement is easier and provides more layout flexibility so we'll do that. The following code can be added to a Screen to draw the CustomRenderable:

```
// Add this at class scope so it can be removed in CustomDestroy:
GraphicalUiElement container;

void CustomInitialize()
{
    var renderable = new CustomRenderable();
    container = new GraphicalUiElement(renderable, null);
    // This acts as the size of the canvas:
    container.Width = 300;
    container.Height = 300;
    container.AddToManagers();
}

void CustomActivity(bool firstTimeCalled)
{
}

void CustomDestroy()
{
    container.RemoveFromManagers();
}
```

This code results in an orange circle with width and height of 300 (radius of 150) being drawn at the top left of the screen.

![](/files/CdHQhvpdgxPp1blqpP8G)


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` query parameter:

```
GET https://docs.flatredball.com/flatredball/api/skiagum/renderables/renderableskiaobject.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.