Custom Painting

Custom painting and drawing in the browser.

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.

Painting the Mandelbrot on the server

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);
}

You can't use the BackgroundImage and custom painting. Painting will take over the backgound.

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 control that implements the full HTML5 canvas specification on the server.

Use the Redraw event to plug in your drawing code.

This code

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.

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.

HTML Canvas

The Canvas control allow you to build very sophisticated custom controls using the <canvas> element and drawing the control entirely in .NET.

The ProgressCircle control is entirely created in .NET using the Canvas control.