Canvas

Wisej.Web.Canvas

Namespace: Wisej.Web

Assembly: Wisej.Framework (4.0.0.0)

• Control

  • Canvas

Represents a drawing surface for immediate-mode 2D rendering, similar to the HTML5 Canvas API.

C#

public class Canvas : Control, IWisejHandler

VB.NET

Important: Drawing calls made on the Canvas are executed immediately on the client, but they are not persisted. When the canvas is refreshed (for example, due to resizing or other UI updates), all previous drawing operations are lost. To maintain the visual state of the canvas, you must handle the Redraw event and re-issue all drawing commands that represent the desired final state of the canvas. Example:

// Example usage of the Canvas control
var canvas = new Wisej.Web.Canvas();
canvas.Redraw += (s, e) =>
{
// Always draw the current state in the Redraw event.
canvas.FillStyle = Color.Red;
canvas.FillRect(10, 10, 100, 100);
canvas.StrokeStyle = Color.Black;
canvas.StrokeRect(10, 10, 100, 100);
};

Constructors

Canvas()

Initializes a new instance of the Canvas class.

Properties

BorderStyle

BorderStyle: Indicates the border style for the control. (Default: None)

FillStyle

Object: Sets or returns the color, gradient, or pattern used to fill the drawing. (Default: null)

GlobalAlpha

Single: Sets or returns the current alpha or transparency value of the drawing. (Default: 1)

GlobalCompositeOperation

CanvasCompositeOperation: Sets or returns how a new image are drawn onto an existing image. (Default: SourceOver)

LineCap

CanvasLineCap: Sets or returns the style of the end caps for a line. (Default: Butt)

LineDashOffset

Single: Sets or returns the type of corner created, when two lines meet. (Default: 0)

LineJoin

CanvasLineJoin: Sets or returns the type of corner created, when two lines meet. (Default: Miter)

LineWidth

Int32: Sets or returns the current line width, in pixels. (Default: 1)

LiveUpdate

Boolean: Turns live update mode on or off. When live update is on, all canvas calls are pushed to the client immediately, when is off (default) the control updates the client at the end of the request. (Default: False)

MiterLimit

Int32: Sets or returns the maximum miter length. (Default: 10)

ShadowBlur

Int32: Sets or returns the blur level for shadows. (Default: 0)

ShadowColor

Color: Sets or returns the color to use for shadows.

The default value is Color.Empty

ShadowOffsetX

Int32: Sets or returns the horizontal distance of the shadow from the shape. (Default: 0)

ShadowOffsetY

Int32: Sets or returns the vertical distance of the shadow from the shape. (Default: 0)

StrokeStyle

Object: Sets or returns the color, gradient, or pattern used for strokes. (Default: null)

TextAlign

CanvasTextAlign: Sets or returns the current alignment for text content, according to the anchor point. (Default: Start)

TextBaseline

CanvasTextBaseline: Sets or returns the current text baseline used when drawing text. (Default: Alphabetic)

TextFont

Font: Sets or returns the current font properties for text content on the canvas. (Default: null)

Methods

Arc(x, y, radius, startAngle, endAngle, counterClockwise)

Creates an arc/curve (used to create circles, or parts of circles).

Parameter	Type	Description
x	Int32	The x-coordinate of the center of the circle.
y	Int32	The y-coordinate of the center of the circle.
radius	Int32	The radius of the circle.
startAngle	Single	The starting angle, in degrees.
endAngle	Single	The ending angle, in degrees.
counterClockwise	Boolean	Specifies whether the drawing should be counterclockwise or clockwise. Default is false.

Arc(location, radius, startAngle, endAngle, counterClockwise)

Creates an arc/curve (used to create circles, or parts of circles).

Parameter	Type	Description
location	Point	The x-coordinate and y-coordinate of the center of the circle.
radius	Int32	The radius of the circle.
startAngle	Single	The starting angle, in degrees.
endAngle	Single	The ending angle, in degrees.
counterClockwise	Boolean	Specifies whether the drawing should be counterclockwise or clockwise. Default is false.

ArcTo(x1, y1, x2, y2, radius)

Creates an arc/curve between two tangents on the canvas.

Parameter	Type	Description
x1	Int32	The x-coordinate of the first tangent.
y1	Int32	The y-coordinate of the first tangent.
x2	Int32	The x-coordinate of the second tangent.
y2	Int32	The y-coordinate of the second tangent.
radius	Int32	The radius of the arc

ArcTo(location1, location2, radius)

Creates an arc/curve between two tangents on the canvas.

Parameter	Type	Description
location1	Point	The x-coordinate and y-coordinate of the first tangent.
location2	Point	The x-coordinate and y-coordinate of the second tangent.
radius	Int32	The radius of the arc

BeginPath()

begins a path, or resets the current path.

BezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)

Adds a point to the current path by using the specified control points that represent a cubic Bézier curve.

Parameter	Type	Description
cp1x	Int32	The x-coordinate of the first Bézier control point.
cp1y	Int32	The y-coordinate of the first Bézier control point.
cp2x	Int32	The x-coordinate of the second Bézier control point.
cp2y	Int32	The y-coordinate of the second Bézier control point.
x	Int32	The x-coordinate of the ending point.
y	Int32	The y-coordinate of the ending point.

A cubic bezier curve requires three points. The first two points are control points that are used in the cubic Bézier calculation and the last point is the ending point for the curve. The starting point for the curve is the last point in the current path. If a path does not exist, use the beginPath() and moveTo() methods to define a starting point.

ClearRect(rect)

Clears the specified pixels within a given rectangle.

Parameter	Type	Description
rect	Rectangle	Rectangle's coordinates and size.

ClearRect(x, y, width, height)

Clears the specified pixels within a given rectangle.

Parameter	Type	Description
x	Int32	The x-coordinate of the upper-left corner of the rectangle.
y	Int32	The y-coordinate of the upper-left corner of the rectangle.
width	Int32	The width of the rectangle, in pixels.
height	Int32	The height of the rectangle, in pixels.

Clip()

Clips a region of any shape and size from the original canvas.

Once a region is clipped, all future drawing will be limited to the clipped region (no access to other regions on the canvas). You can however save the current canvas region using the save() method before using the clip() method, and restore it (with the restore() method) any time in the future.

ClosePath()

Creates a path from the current point back to the starting point.

CreateLinearGradient(x0, y0, x1, y1, colorStops)

Creates a linear gradient object. The gradient can be used to fill rectangles, circles, lines, text, etc.

Parameter	Type	Description
x0	Int32	The x-coordinate of the start point of the gradient.
y0	Int32	The y-coordinate of the start point of the gradient.
x1	Int32	The x-coordinate of the end point of the gradient.
y1	Int32	The y-coordinate of the end point of the gradient.
colorStops	Object[]	Array of color stops. Each element must define a stop value between 0.0 and 1.0 and a color value.

Returns: Object.

CreatePattern(image, repeat)

Repeats the specified element in the specified direction. The repeated element can be used to draw/fill rectangles, circles, lines etc.

Parameter	Type	Description
image	Image	Specifies the image of the pattern to use.
repeat	CanvasRepeatPattern	Specifies the repeat pattern.

Returns: Object.

CreatePattern(imageSource, repeat)

Repeats the specified element in the specified direction. The repeated element can be used to draw/fill rectangles, circles, lines etc.

Parameter	Type	Description
imageSource	String	Specifies the source of the image of the pattern to use.
repeat	CanvasRepeatPattern	Specifies the repeat pattern.

Returns: Object.

CreateRadialGradient(x0, y0, r0, x1, y1, r1, colorStops)

Creates a linear gradient object. The gradient can be used to fill rectangles, circles, lines, text, etc.

Parameter	Type	Description
x0	Int32	The x-coordinate of the start point of the gradient.
y0	Int32	The y-coordinate of the start point of the gradient.
r0	Single	The radius of the starting circle.
x1	Int32	The x-coordinate of the end point of the gradient.
y1	Int32	The y-coordinate of the end point of the gradient.
r1	Single	The radius of the ending circle.
colorStops	Object[]	Array of color stops. Each element must define a stop value between 0.0 and 1.0 and a color value.

Returns: Object.

DrawImage(image, x, y)

Draws an image onto the canvas.

Parameter	Type	Description
image	Image	Specifies the image to draw.
x	Int32	The x-coordinate where to place the image on the canvas.
y	Int32	The y-coordinate where to place the image on the canvas.

DrawImage(image, location)

Draws an image onto the canvas.

Parameter	Type	Description
image	Image	Specifies the image to draw.
location	Point	The x-coordinate and y-coordinate where to place the image on the canvas.

DrawImage(image, x, y, width, height)

Draws an image onto the canvas.

Parameter	Type	Description
image	Image	Specifies the image to draw.
x	Int32	The x-coordinate where to place the image on the canvas.
y	Int32	The y-coordinate where to place the image on the canvas.
width	Int32	The width of the image to use (stretch or reduce the image).
height	Int32	The height of the image to use (stretch or reduce the image).

DrawImage(image, rect)

Draws an image onto the canvas.

Parameter	Type	Description
image	Image	Specifies the image to draw.
rect	Rectangle	The coordinates and size of the image to place on the canvas.

DrawImage(image, clipX, clipY, clipWidth, clipHeight, x, y, width, height)

Draws an image onto the canvas.

Parameter	Type	Description
image	Image	Specifies the image to draw.
clipX	Int32	The x-coordinate where to start clipping.
clipY	Int32	The y-coordinate where to start clipping.
clipWidth	Int32	The width of the clipped image.
clipHeight	Int32	The height of the clipped image.
x	Int32	The x coordinate where to place the image on the canvas.
y	Int32	The y coordinate where to place the image on the canvas.
width	Int32	The width of the image to use (stretch or reduce the image).
height	Int32	The height of the image to use (stretch or reduce the image).

DrawImage(image, clipRect, imageRect)

Draws an image onto the canvas.

Parameter	Type	Description
image	Image	Specifies the image to draw.
clipRect	Rectangle	The clip rectangle.
imageRect	Rectangle	The size and location of the image to place on the canvas.

DrawImage(imageSource, x, y)

Draws an image onto the canvas.

Parameter	Type	Description
imageSource	String	Specifies the image to draw.
x	Int32	The x-coordinate where to place the image on the canvas.
y	Int32	The y-coordinate where to place the image on the canvas.

DrawImage(imageSource, location)

Draws an image onto the canvas.

Parameter	Type	Description
imageSource	String	Specifies the image to draw.
location	Point	The x-coordinate and y-coordinate where to place the image on the canvas.

DrawImage(imageSource, x, y, width, height)

Draws an image onto the canvas.

Parameter	Type	Description
imageSource	String	Specifies the image to draw.
x	Int32	The x coordinate where to place the image on the canvas.
y	Int32	The y coordinate where to place the image on the canvas.
width	Int32	The width of the image to use (stretch or reduce the image).
height	Int32	The height of the image to use (stretch or reduce the image).

DrawImage(imageSource, rect)

Draws an image onto the canvas.

Parameter	Type	Description
imageSource	String	Specifies the image to draw.
rect	Rectangle	The coordinates and size of the image to place on the canvas.

DrawImage(imageSource, clipX, clipY, clipWidth, clipHeight, x, y, width, height)

Draws an image onto the canvas.

Parameter	Type	Description
imageSource	String	Specifies the image to draw.
clipX	Int32	The x coordinate where to start clipping.
clipY	Int32	The y coordinate where to start clipping.
clipWidth	Int32	The width of the clipped image.
clipHeight	Int32	The height of the clipped image.
x	Int32	The x coordinate where to place the image on the canvas.
y	Int32	The y coordinate where to place the image on the canvas.
width	Int32	The width of the image to use (stretch or reduce the image).
height	Int32	The height of the image to use (stretch or reduce the image).

DrawImage(imageSource, clipRect, imageRect)

Draws an image onto the canvas.

Parameter	Type	Description
imageSource	String	Specifies the image to draw.
clipRect	Rectangle	The clip rectangle.
imageRect	Rectangle	The size and location of the image to place on the canvas.

Fill()

Fills the current drawing (path.)

FillRect(rect)

Draws a "filled" rectangle. The default color of the fill is black.

Parameter	Type	Description
rect	Rectangle	Rectangle's coordinates and size.

FillRect(x, y, width, height)

Draws a "filled" rectangle. The default color of the fill is black.

Parameter	Type	Description
x	Int32	The x-coordinate of the upper-left corner of the rectangle.
y	Int32	The y-coordinate of the upper-left corner of the rectangle.
width	Int32	The width of the rectangle, in pixels.
height	Int32	The height of the rectangle, in pixels.

FillText(text, x, y)

Draws filled text on the canvas. The default color of the text is black.

Parameter	Type	Description
text	String	Specifies the text that will be written on the canvas.
x	Int32	The x-coordinate where to start painting the text (relative to the canvas).
y	Int32	The y-coordinate where to start painting the text (relative to the canvas)

FillText(text, location)

Draws filled text on the canvas. The default color of the text is black.

Parameter	Type	Description
text	String	Specifies the text that will be written on the canvas.
location	Point	The x-coordinate and y-coordinate where to start painting the text (relative to the canvas).

GetLineDash()

Returns the current line dash pattern.

Returns: Int32[]. A list of numbers that specifies distances to alternately draw a line and a gap (in coordinate space units).

LineTo(x, y)

Adds a new point and creates a line TO that point FROM the last specified point in the canvas (this method does not draw the line).

Parameter	Type	Description
x	Int32	The x-coordinate of where to create the line to.
y	Int32	The y-coordinate of where to create the line to.

LineTo(location)

Adds a new point and creates a line TO that point FROM the last specified point in the canvas (this method does not draw the line).

Parameter	Type	Description
location	Point	The x-coordinate and y-coordinate of where to create the line to.

MoveTo(x, y)

Moves the path to the specified point in the canvas, without creating a line.

Parameter	Type	Description
x	Int32	The x-coordinate of where to move the path to.
y	Int32	The y-coordinate of where to move the path to.

Use the stroke() method to actually draw the path on the canvas.

MoveTo(location)

Moves the path to the specified point in the canvas, without creating a line.

Parameter	Type	Description
location	Point	The x-coordinate and y-coordinate of where to move the path to.

Use the stroke() method to actually draw the path on the canvas.

OnCreateControl()

Creates and register this control and all its children.

OnRedraw(e)

Fires the Redraw event.

Parameter	Type	Description
e	EventArgs	An EventArgs that contains the event data.

OnWebRender(config)

Renders the client component.

Parameter	Type	Description
config	Object	Dynamic configuration object.

QuadraticCurveTo(cpx, cpy, x, y)

Adds a point to the current path by using the specified control points that represent a quadratic Bézier curve.

Parameter	Type	Description
cpx	Int32	The x-coordinate of the Bézier control point.
cpy	Int32	The y-coordinate of the Bézier control point.
x	Int32	The x-coordinate of the ending point.
y	Int32	The y-coordinate of the ending point.

A quadratic Bézier curve requires two points. The first point is a control point that is used in the quadratic Bézier calculation and the second point is the ending point for the curve. The starting point for the curve is the last point in the current path. If a path does not exist, use the beginPath() and moveTo() methods to define a starting point.

Rect(rect)

Creates a rectangle.

Parameter	Type	Description
rect	Rectangle	Rectangle's coordinates and size.

Rect(x, y, width, height)

Creates a rectangle.

Parameter	Type	Description
x	Int32	The x-coordinate of the upper-left corner of the rectangle.
y	Int32	The y-coordinate of the upper-left corner of the rectangle.
width	Int32	The width of the rectangle, in pixels.
height	Int32	The height of the rectangle, in pixels.

Restore()

Returns previously saved path state and attributes.

Rotate(degrees)

Method rotates the current drawing.

Parameter	Type	Description
degrees	Single	The rotation angle, in degrees.

The rotation will only affect drawings made AFTER the rotation is done.

Save()

Saves the state of the current context.

Scale(scaleWidth, scaleHeight)

Scales the current drawing, bigger or smaller.

Parameter	Type	Description
scaleWidth	Single	Scales the width of the current drawing (1=100%, 0.5=50%, 2=200%, etc.)
scaleHeight	Single	Scales the height of the current drawing (1=100%, 0.5=50%, 2=200%, etc.)

Scale(scale)

Scales the current drawing, bigger or smaller.

Parameter	Type	Description
scale	SizeF	Scales the width of the current drawing (1=100%, 0.5=50%, 2=200%, etc.)

SetLineDash(segments)

Sets the line dash pattern.

Parameter	Type	Description
segments	Int32[]	A list of numbers that specifies distances to alternately draw a line and a gap (in coordinate space units). If the number of elements in the array is odd, the elements of the array get copied and concatenated. For example, [5, 15, 25] will become [5, 15, 25, 5, 15, 25].

SetTransform(scaleWidth, skewHoriz, skewVert, scaleHeight, x, y)

Resets the current transform to the identity matrix, and then runs transform() with the same arguments.

Parameter	Type	Description
scaleWidth	Single	Scales the drawing horizontally.
skewHoriz	Single	Skew the drawing horizontally.
skewVert	Single	Skew the drawing vertically.
scaleHeight	Single	Scales the drawing vertically.
x	Int32	Moves the drawing horizontally
y	Int32	Moves the drawing vertically.

The transformation will only affect drawings made after the transform() method is called. The transform() method behaves relatively to other transformations made by rotate(), scale(), translate(), or transform(). Example: If you already have set your drawing to scale by two, and the transform() method scales your drawings by two, your drawings will now scale by four.

Stroke()

Draws the path you have defined.

StrokeRect(rect)

Draws a rectangle (no fill). The default color of the stroke is black.

Parameter	Type	Description
rect	Rectangle	Rectangle's coordinates and size.

StrokeRect(x, y, width, height)

Draws a rectangle (no fill). The default color of the stroke is black.

Parameter	Type	Description
x	Int32	The x-coordinate of the upper-left corner of the rectangle.
y	Int32	The y-coordinate of the upper-left corner of the rectangle.
width	Int32	The width of the rectangle, in pixels.
height	Int32	The height of the rectangle, in pixels.

StrokeText(text, x, y)

Draws text (with no fill) on the canvas. The default color of the text is black.

Parameter	Type	Description
text	String	Specifies the text that will be written on the canvas.
x	Int32	The x-coordinate where to start painting the text (relative to the canvas).
y	Int32	The y-coordinate where to start painting the text (relative to the canvas)

StrokeText(text, location)

Draws text (with no fill) on the canvas. The default color of the text is black.

Parameter	Type	Description
text	String	Specifies the text that will be written on the canvas.
location	Point	The x-coordinate and y-coordinate where to start painting the text (relative to the canvas).

Transform(scaleWidth, skewHoriz, skewVert, scaleHeight, x, y)

Replaces the current transformation matrix.

Parameter	Type	Description
scaleWidth	Single	Scales the drawing horizontally.
skewHoriz	Single	Skew the drawing horizontally.
skewVert	Single	Skew the drawing vertically.
scaleHeight	Single	Scales the drawing vertically.
x	Int32	Moves the drawing horizontally
y	Int32	Moves the drawing vertically.

The transformation will only affect drawings made after the transform() method is called. The transform() method behaves relatively to other transformations made by rotate(), scale(), translate(), or transform(). Example: If you already have set your drawing to scale by two, and the transform() method scales your drawings by two, your drawings will now scale by four.

Translate(x, y)

Remaps the (0,0) position on the canvas.

Parameter	Type	Description
x	Int32	The value to add to horizontal (x) coordinates.
y	Int32	The value to add to vertical (y) coordinates.

When you call a method such as fillRect() after translate(), the value is added to the x- and y-coordinate values.

Translate(location)

Remaps the (0,0) position on the canvas.

Parameter	Type	Description
location	Point	The value to add to horizontal (x) and vertical (y) coordinates.

When you call a method such as fillRect() after translate(), the value is added to the x- and y-coordinate values.

Events

Redraw

EventHandler Fired when the canvas requires a full redraw.

Implements

Name	Description
IUserData	Provides access to the UserData and Tag properties associated to the component implementing this interface.
IBindableComponent	Bindable components implement this interface.
IDropTarget	Controls that support drag & drop operations implement this interface.
IWisejComponent	All wisej components implement this interface.
IWisejControl	All wisej controls derived from the Control class must implement this interface.
IWisejHandler	Represents a Wisej component that is capable of handling postback requests from the client.
IWisejSerializable	Allows an object to serialize itself.