Canvas

WATCH & LEARN0:48 · Animated tutorial

7 scenesPlay, pause, or scrub at your own pace

Use the Canvas control to draw graphics through code, such as charts, combined images, and animations.

info

For a complete 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.

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:

Place drawing code in the Canvas's Redraw event handler so it runs whenever the canvas needs to be redrawn.

C#

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

Item	Description
Class name	wisej.web.Canvas
Theme appearance	"canvas", see Themes.
Child components	"canvas" is the HTML5 canvas element. See JavaScript.
Source code	https://github.com/iceteagroup/wisej-js