Skip to main content

Canvas

The Canvas is a control which can be used to draw graphics via scripting. This can, for instance, be used to draw graphs, combine photos, or create simple (and not so simple) animations.

info

For a full list of properties, methods and events see the API documentation.

Features

Drawing

The Wisej.NET Canvas control implements all the same properties and methods as the JavaScript Canvas control. You can use methods like LineTo(), FillRect(), and FillText() to draw directly on the control in the browser.

Interactive drawing demonstration using Canvas control

info

You must still call BeginPath() and Stroke() to draw lines. See https://www.w3schools.com/tags/canvas_lineto.asp.

How To

Draw a Line

You can draw a line with the Wisej.Web.Canvas control the same way you would a JavaScript Canvas element:

Note that all drawing must be done inside of the Canvas's Redraw event.

private void canvas1_Redraw(object sender, EventArgs e)
{
canvas1.BeginPath();
canvas1.MoveTo(0, 0);
canvas1.LineTo(100, 100);
canvas1.StrokeStyle = Color.Red;
canvas1.Stroke();
}

Advanced

JavaScript Widget

ItemDescription
Class namewisej.web.Canvas
Theme appearance"canvas", see Themes.
Child components"canvas" is the HTML5 canvas element. See JavaScript.
Source codehttps://github.com/iceteagroup/wisej-js