How to Draw 2D Graphics in .NET MAUI’s GraphicsView
Tags: csharp, dotnet, mobile, maui
Published: 2022-11-18 03:24:18

---
title: How to Draw 2D Graphics in .NET MAUI’s GraphicsView
published: true
date: 2022-11-17 11:30:42 UTC
tags: csharp, dotnet, mobile, maui
canonical_url: https://www.syncfusion.com/blogs/post/draw-2d-graphics-in-dotnet-maui-graphicsview.aspx
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ozx2ifnksvrgf904sc9v.png
---
If you need to draw 2D graphical objects in your application without a platform handler in [.NET MAUI](https://learn.microsoft.com/en-us/dotnet/maui/what-is-maui?view=net-maui-7.0 ".NET MAUI documentation"), then you can use the cross-platform graphics canvas, [GraphicsView](https://learn.microsoft.com/en-us/dotnet/maui/user-interface/controls/graphicsview "GraphicsView in .NET MAUI"), that .NET MAUI provides. This GraphicsView can be accessed using the [Microsoft.Maui.Graphics](https://github.com/dotnet/Microsoft.Maui.Graphics "Microsoft.Maui.Graphics") namespace. This canvas supports drawing and painting shapes and images, compositing operations, and transforming graphical object.

GraphicsView defines a **Drawable** property, of type **IDrawable** , that is responsible for drawing your 2D objects within the **Draw()** method. The **Draw()** method will be called each time the GraphicsView is invalidated.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2022/11/GraphicsView-Class-Diagram-2.png" alt="Class Diagram of GraphicsView" style="width:100%">

  <figcaption>GraphicsView Class Diagram</figcaption>

</figure>

In this blog, let’s see how to draw 2D graphics using the GraphicsView canvas in your .NET MAUI application.

## Creating a GraphicsView

The GraphicsView control should define the **IDrawable** interface that specifies the drawable content. So, first create a class named **GraphicsDrawable** that is inherited from the **IDrawable** interface and then implement its **Draw** method.

Refer to the following code example.

```csharp
namespace _2DGraphicsDrawing;
 
public class GraphicsDrawable : IDrawable
{
   public void Draw(ICanvas canvas, RectF dirtyRect)
   {
      // Drawing code goes here
   }
}
```

The **Draw** method has the following two arguments:

- **ICanvas:** The drawing canvas that contains the abstraction of native canvas APIs to draw graphical objects.
- **RectF:** A structure that defines the size and location data of the drawing canvas.

The following code example shows how to add the GraphicsView control to a .NET MAUI app and assign the **IDrawable** object.

```xml
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:_2DGraphicsDrawing"
             x:Class="_2DGraphicsDrawing.MainPage">
 <ContentPage.Resources>
  <local:GraphicsDrawable x:Key="drawable"/>
 </ContentPage.Resources>
 <VerticalStackLayout>
  <GraphicsView Drawable="{StaticResource drawable}"
                HeightRequest="500"
                WidthRequest="500" />
  </VerticalStackLayout>
 
</ContentPage>
```

With the setup to draw in a .NET MAUI application completed, lets focus on drawing simple shapes and string values.

## Drawing a line

You can draw a line on the **ICanvas** interface using the **DrawLine** method. This method requires four arguments of type float that specify the x and y coordinates of start and stop points of the line.

The following code example shows how to draw a simple line using the **DrawLine** method.

```csharp
public class GraphicsDrawable : IDrawable
{
  public void Draw(ICanvas canvas, RectF dirtyRect)
  {
    canvas.StrokeColor = Colors.Red;
    canvas.StrokeSize = 6;
    canvas.DrawLine(10, 10, 100, 100);
   }
}
```
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2022/11/Drawing-a-Simple-Line-Using-the-GraphicsView-Canvas-in-.NET-MAUI-1.png" alt="Drawing a Simple Line Using the GraphicsView Canvas in .NET MAUI" style="width:100%">

  <figcaption>Drawing a Simple Line Using the GraphicsView Canvas in .NET MAUI</figcaption>

</figure>

## Drawing an ellipse

To draw an ellipse or a circle on the **ICanvas,** use the **DrawEllipse** method. The **DrawEllipse** method takes four arguments, x, y, width, and height, of type float, that represent the starting point and size (width and height) of the ellipse.

**Note:** To draw a circle, specify the same values to the width and height arguments in the **DrawEllipse** method.

Refer to the following code example.

```csharp
public void Draw(ICanvas canvas, RectF dirtyRect)
{
   canvas.StrokeColor = Colors.Red;
   canvas.StrokeSize = 4;
   canvas.DrawEllipse(10, 10, 100, 50);
}
```
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2022/11/Drawing-an-Ellipse-Using-the-GraphicsView-Canvas-in-.NET-MAUI-1.png" alt="Drawing an Ellipse Using the GraphicsView Canvas in .NET MAUI" style="width:100%">

  <figcaption>Drawing an Ellipse Using the GraphicsView Canvas in .NET MAUI</figcaption>

</figure>

To draw a filled ellipse, use the  **FillEllipse**  method with the same set of arguments.

## Drawing a rectangle

We can easily draw rectangles and squares on the **ICanvas** using the **DrawRectangle** method. This method takes x, y, width, and height arguments, of type float, that represent the start position and size of the rectangle or square.

**Note:** To draw a square, specify the same values in the width and height arguments in the **DrawRectangle** method.

Refer to the following code example to draw a rectangle.

```csharp
public void Draw(ICanvas canvas, RectF dirtyRect)
{
  canvas.StrokeColor = Colors.Red;
  canvas.StrokeSize = 4;
  canvas.DrawRectangle(10, 10, 100, 50);
}
```
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2022/11/Drawing-a-Rectangle-Using-the-GraphicsView-Canvas-in-.NET-MAUI-1.png" alt="Drawing a Rectangle Using the GraphicsView Canvas in .NET MAUI" style="width:100%">

  <figcaption>Drawing a Rectangle Using the GraphicsView Canvas in .NET MAUI</figcaption>

</figure>

A filled rectangle can be drawn using the  **FillRectangle**  method on the **ICanvas** with the same set of arguments.

## Drawing an arc

Let’s draw an arc on the **ICanvas** using the **DrawArc** method. To do so, we require the x, y, width, height, startAngle, and endAngle arguments, of type float; and clockwise and closed arguments, of type **bool**.

Refer to the following code example.

```csharp
public void Draw(ICanvas canvas, RectF dirtyRect)
{
  canvas.StrokeColor = Colors.Red;
  canvas.StrokeSize = 4;
  canvas.DrawArc(10, 10, 100, 100, 0, 180, true, false);
}
```
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2022/11/Drawing-an-Arc-Using-the-GraphicsView-Canvas-in-.NET-MAUI-1.png" alt="Drawing an Arc Using the GraphicsView Canvas in .NET MAUI" style="width:100%">

  <figcaption>Drawing an Arc Using the GraphicsView Canvas in .NET MAUI</figcaption>

</figure>

A filled arc can be drawn using the  **FillArc**  method on **ICanvas** with the same set of arguments.

## Drawing a path

A path is a collection of one or more contours that consists of straight lines, quadratic curves, and cubic curves.

We can use the paths to draw curves and complex shapes on the **ICanvas** using the **DrawPath** method, which requires a **PathF** argument.

A contour generally begins with a call to the **PathF.MoveTo** method, which establishes a point at the beginning of the contour and an initial current point. You can then call the following methods to continue the contour with a line or curve shape:

- **LineTo:** Adds a straight line to the path.
- **AddArc:** Adds an arc.
- **CurveTo:** Adds a cubic Bezier spline.
- **QuadTo:** Adds a quadratic Bezier spline.

The following code example shows how to draw a path.

```csharp
Public void Draw (Icanvas canvas, RectF dirtyRect)
{
  PathF path = new PathF();
  path.MoveTo(40, 10);
  path.LineTo(70, 80);
  path.LineTo(10, 50);
  path.Close();
  canvas.StrokeColor = Colors.Red;
  canvas.StrokeSize = 6;
  canvas.DrawPath(path);
}
```
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2022/11/Drawing-a-Path-Using-the-GraphicsView-Canvas-in-.NET-MAUI-1.png" alt="Drawing a Path Using the GraphicsView Canvas in .NET MAUI" style="width:100%">

  <figcaption>Drawing a Path Using the GraphicsView Canvas in .NET MAUI</figcaption>

</figure>

A filled path can be drawn using the  **FillPath** method in **ICanvas**.

## Drawing a string

Now, let’s see how to draw strings on **ICanvas** using the **DrawString** method. We can define the appearance of each string by setting the **Font** , **FontColor** , and **FontSize** properties of **ICanvas**. To align the strings, specify the horizontal and vertical alignment options in the **DrawString** method to perform alignment within the bounding box.

The following code example shows how to draw strings.

```csharp
Public void Draw(Icanvas canvas, RectF dirtyRect)
{
   canvas.FontColor = Colors.Red;
   canvas.FontSize = 18;
   canvas.DrawString(“Text is left aligned.”, 20, 20, 380, 100, HorizontalAlignment.Left, VerticalAlignment.Top);
   canvas.DrawString(“Text is centered.”, 20, 60, 380, 100, HorizontalAlignment.Center, VerticalAlignment.Top);
   canvas.DrawString(“Text is right aligned.”, 20, 100, 380, 100, HorizontalAlignment.Right, VerticalAlignment.Top);
}
```
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2022/11/Drawing-Strings-Using-the-GraphicsView-Canvas-in-.NET-MAUI-1.png" alt="Drawing String Elements Using the GraphicsView Canvas in .NET MAUI" style="width:100%">

  <figcaption>Drawing Strings Using the GraphicsView Canvas in .NET MAUI</figcaption>

</figure>

## Drawing free hand signatures using the GraphicsView in .NET MAUI

In the previous examples, we learned how to use the **GraphicsView** control to create simple shapes and text.

Now, let’s see how to create a signature in your .NET MAUI app.

**Note:** To get the realistic look and feel of a handwritten signature, use the [Syncfusion .NET MAUI SignaturePad](https://www.syncfusion.com/maui-controls/maui-signaturepad ".NET MAUI SignaturePad") control.

Follow these steps to capture and freehand draw using the **GraphicsView** control:

**Step 1** : Create the **SignatureView** class, extended from the **GraphicsView** control.

```csharp
public class SignatureView : GraphicsView
{
}
```

**Step 2** : Then, create an object of type **GraphicsDrawable** and assign it to the **Drawable** property of the **SignatureView**.

```csharp
public SignatureView()
{
  graphicsDrawable = new GraphicsDrawable();
  this.Drawable = graphicsDrawable;
}
```

**Step 3** : The **GraphicsView** provides the events support to detect interaction with the touch pointers such as start, drag, and end interactions. Using this support, we can get the touch interaction points on each move. Now, call the **Invalidate()** method within the event to draw the signature based on every touch movement in the drawable part.

```csharp
Public SignatureView()
{
  this.StartInteraction += SignatureView_StartInteraction;
  this.DragInteraction += SignatureView_DragInteraction;
  this.EndInteraction += SignatureView_EndInteraction;
 
}
private void SignatureView_DragInteraction(object sender, TouchEventArgs e)
{
   graphicsDrawable.DragPoints.Add(e.Touches[0]);
   this.Invalidate();
}
 
private void SignatureView_StartInteraction(object sender, TouchEventArgs e)
{
    graphicsDrawable.StartPoint = e.Touches[0];
    this.Invalidate();
}
```

**Step 4** : Draw signatures using the **Draw** method, which has **ICanvas** and view bounds. Using this method, you can also draw a background for view bounds and signatures based on the captured interaction points.

```csharp
public void Draw(ICanvas canvas, RectF dirtyRect)
{
   canvas.FillColor = Colors.CornflowerBlue;
   canvas.FillRectangle(dirtyRect);
 
   PathF path = new PathF();
   if (DragPoints?.Count > 0)
   {
      path.MoveTo(StartPoint.X, StartPoint.Y);
      foreach (var point in DragPoints)
      {
         path.LineTo(point);
      }
      canvas.StrokeColor = Colors.Red;
      canvas.StrokeSize = 2;
 
      canvas.DrawPath(path);
   }
}
```

That’s it! You can now create your signatures with the help of the .NET MAUI 2D graphics canvas. Refer to the following GIF image.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2022/11/Drawing-a-Signature-Using-the-GraphicsView-Canvas-in-.NET-MAUI-1.gif" alt="Drawing a Signature Using the GraphicsView Canvas in .NET MAUI" style="width:100%">

  <figcaption>Drawing a Signature Using the GraphicsView Canvas in .NET MAUI</figcaption>

</figure>

## GitHub reference

For more details, [refer to the complete code example for drawing signatures using the GraphicsView in .NET MAUI](https://github.com/SyncfusionExamples/Draw-Signature-using-GraphicsView-in-.NET-MAUI "Draw signatures using GraphicsView in .NET MAUI GitHub demo").

## Conclusion

Thanks for reading! In this blog post, we have seen how to draw 2D graphics in your .NET MAUI applications using the GraphicsView canvas. Try out the procedures in this blog and leave your feedback in the comments section below!

Syncfusion [.NET MAUI controls](https://www.syncfusion.com/maui-controls "Syncfusion .NET MAUI controls") were built from scratch using .NET MAUI, so they feel like framework controls. They are fine-tuned to work with a huge volume of data. Use them to build better cross-platform mobile and desktop apps!

For current customers, the new Essential Studio version is available for download from the [License and Downloads](https://www.syncfusion.com/account/downloads "License and download page of Essential Studio") page. If you are not yet a Syncfusion customer, you can always download [our free evaluation](https://www.syncfusion.com/downloads/maui/confirm "Free evaluation of the Syncfusion Essential Studio") to see all our controls in action.

For questions, you can contact us through our [support forum](https://www.syncfusion.com/forums "Syncfusion support forum"), [support portal](https://support.syncfusion.com/ "Syncfusion support portal"), or [feedback portal](https://www.syncfusion.com/feedback/xamarin-forms "Syncfusion feedback portal"). We are always happy to assist you!

## Related blogs

- [What’s New in .NET MAUI: 2022 Volume 3](https://www.syncfusion.com/blogs/post/whats-new-in-net-maui-2022-volume-3.aspx "Blog: What’s New in .NET MAUI: 2022 Volume 3")
- [Configure Syncfusion .NET MAUI Controls Using Visual State Manager (VSM)](https://www.syncfusion.com/blogs/post/configure-syncfusion-net-maui-controls-using-visual-state-manager.aspx "Blog: Configure Syncfusion .NET MAUI Controls Using Visual State Manager (VSM)")
- [Create Group Chat Profile View in .NET MAUI App](https://www.syncfusion.com/blogs/post/create-group-chat-profile-view-in-net-maui-app.aspx "Blog: Create Group Chat Profile View in .NET MAUI App")
- [Replicating an Immersive UI in .NET MAUI](https://www.syncfusion.com/blogs/post/replicating-an-immersive-ui-in-net-maui.aspx "Blog: Replicating an Immersive UI in .NET MAUI")