# Custom Painting

All Wisej.NET controls support custom painting. Simply attach to the Paint event and draw whatever you like, it will display in the browser as the background of the control.

<div align="left"><img src="https://553579532-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MF1D11gPs_az3xaKusw%2Fuploads%2Fgit-blob-90467e46d7157db681d9203f2b0ef6758f7971f3%2Fimage.png?alt=media" alt="Painting the Mandelbrot on the server"></div>

```csharp
this.button1.Paint += this.button1_Paint;

private void button1_Paint(object sender, PaintEventArgs e)
{
    e.Graphics.FillPie(Brushes.Blue, new Rectangle(0, 0, 150, 150), 0, 360);
}
```

<div align="left"><img src="https://553579532-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MF1D11gPs_az3xaKusw%2Fuploads%2Fgit-blob-5395bc949870ca3284f57ac8aabbe668de82947c%2Fimage.png?alt=media" alt=""></div>

{% hint style="danger" %}
You can't use the BackgroundImage and custom painting. Painting will take over the backgound.
{% endhint %}

There is no limit to what you can draw: e.Graphics is a GDI+ object that Wisej.NET sends back to the browser as a png image and immediately removes from memory.

## Canvas Drawing

In addition to being able to paint any control, Wisej.NET also provides a [Wisej.Web.Canvas](https://docs.wisej.com/api/wisej.web/content/wisej.web.canvas) control that implements the full HTML5 canvas specification on the server.

Use the [Redraw ](https://docs.wisej.com/api/wisej.web/content/wisej.web.canvas#redraw)event to plug in your drawing code.

This code

```csharp
this.canvas1.Redraw+= this.canvas1_Redraw;

private void canvas1_Redraw(object sender, EventArgs e)
{
			this.canvas1.BeginPath();
			this.canvas1.Arc(150, 150, 150, 0, 360);
			this.canvas1.Stroke();
			
			// Syntax in JavaScript would be
			// var ctx = c.getContext("2d");
			// ctx.beginPath();
			// ctx.arc(150, 150, 150, 0, 2 * Math.PI);
			// ctx.stroke();
}
```

Produces this circle.

<div align="left"><img src="https://553579532-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MF1D11gPs_az3xaKusw%2Fuploads%2Fgit-blob-d80c6dd69ff28e8abe672bfb6b53ff5155c0cdf1%2Fimage.png?alt=media" alt=""></div>

All the HTML5 Canvas method are available in C# or VB.NET on the server. All the arguments are the same and the names are the same. The only different is that the first character is uppercase and the radians are degrees for simplicity.

{% embed url="<https://www.w3schools.com/html/html5_canvas.asp>" %}

{% hint style="info" %}
The Canvas control allow you to build very sophisticated custom controls using the \<canvas> element and drawing the control entirely in .NET.
{% endhint %}

{% embed url="<https://drive.google.com/file/d/10eh7j1X94LnBZey1N2q_6RIMHPX2ZNfC/view>" %}

The [ProgressCircle ](https://docs.wisej.com/extensions/extensions/progresscircle)control is entirely created in .NET using the Canvas control.