Skip to content

DrawContext

Context for drawing images.

An instance of DrawContext is a canvas on which you can draw an image using shapes, texts and other images. You must specify the size of your canvas by setting the size property. In order to start drawing your image, you must call beginDrawing(). At any point after beginning your drawing and before ending your drawing can you call getImage() to get an image object of your drawing. When you are done drawing your image, you should call endDrawing().

size

Size of canvas.

Specifies the size of the canvas on which you are drawing. The image returned by getImage() will have this exact size, except if respectScreenScale is true.

size: Size

respectScreenScale

Enable to respect the scale of the screen.

Devices have a screen scale that is used to convert between the logical coordinate space and the device coordinate space. For example, retina screens have a screen scale of 2 or 3 meaning that one point in the logical coordinate space is represented by four or nine pixels. Respecting the screen scale will multiply the specified size of the canvas by the screen scale. For example a canvas of size 200 by 200 will be 600 by 600 when the image is rendered on a retina screen with a screen scale of 3. When respecting the screen scale is disabled, you may experience that your images looks blurry because essentially the size you have specified will be stretched when rendered on the screen. Default is false.

respectScreenScale: bool

opaque

Determines whether the context is opaque.

When enabled your image will be rendered opaque. Default is true.

opaque: bool

-new DrawContext

Constructs a canvas to draw on.

new DrawContext()

Constructs a new canvas to draw images, shapes and texts on. Before drawing to the context, beginDrawing() should be called.


-getImage

Retrieves the image.

getImage(): Image

Call this to retrieve the image you have drawn to the context. Note that this should be called before calling endDrawing().

Return value

Image
The image drawn to the context.


-drawImageInRect

Draws an image in the specified rect.

drawImageInRect(image: Image, rect: Rect)

Draws the image in the rectangle. The image will be scaled to fit within the rectangle.

Parameters

image
Image
Image to draw.

rect
Rect
Rectangle to draw the image in.


-drawImageAtPoint

Draws an image at the specified point.

drawImageAtPoint(image: Image, point: Point)

Draws the image at the point. The top-left corner of the image will be drawn at the specified point.

Parameters

image
Image
Image to draw.

point
Point
Point at which to draw top-left corner of the image.


-setFillColor

Sets the fill color.

setFillColor(color: Color)

Sets the fill color to be used when performing a fill operation. Any fill operation performed afterwards will fill with the specified color until another call to setFillColor is made.

Parameters

color
Color
Color to set for filling.


-setStrokeColor

Sets the stroke color.

setStrokeColor(color: Color)

Sets the stroke color to be used when performing a stroke operation. Any stroke operation performed afterwards will stroke with the specified color until another call to setStrokeColor is made.

Parameters

color
Color
Color to set for stroking.


-setLineWidth

Sets the line width for stroking.

setLineWidth(width: number)

Sets the line width to be used when performing a stroke operation.

Parameters

width
number
Line width to use for stroking.


-fill

Fills a rectangle.

fill(rect: Rect)

Fills the rectangle width the color set when calling setFillColor.

Parameters

rect
Rect
Rectangle to fill.


-fillRect

Fills a rectangle.

fillRect(rect: Rect)

Fills the rectangle width the color set when calling setFillColor.

Parameters

rect
Rect
Rectangle to fill.


-fillEllipse

Fills an ellipse.

fillEllipse(rect: Rect)

Fills the ellipse that fits within the supplied rectangle with the color set when calling setFillColor.

Parameters

rect
Rect
Rectangle incapsulating the ellipse to fill.


-stroke

Strokes a rectangle.

stroke(rect: Rect)

Draws a line around the rectangle using the color set when calling setStrokeColor. The line will have the width set when calling setLineWidth.

Parameters

rect
Rect
Rectangle to stroke.


-strokeRect

Strokes a rectangle.

strokeRect(rect: Rect)

Draws a line around the rectangle using the color set when calling setStrokeColor. The line will have the width set when calling setLineWidth.

Parameters

rect
Rect
Rectangle to stroke.


-strokeEllipse

Strokes a rectangle.

strokeEllipse(rect: Rect)

Draws a line around the ellipse that fits within the supplied rectangle. The line will have the color set when calling setStrokeColor and the width set when calling setLineWidth.

Parameters

rect
Rect
Rectangle incapsulating the ellipse to stroke.


-addPath

Adds a path to the context.

addPath(path: Path)

After adding a path to the context, the path can be stroked or filled by calling strokePath and fillPath. Note that only the path that was added latest will be affected by calls to strokePath and fillPath.

Parameters

path
Path
Path to add to the context.


-strokePath

Strokes the path that was added the latest.

strokePath()

The path that was latest added to the context is stroked with the color set using setStrokeColor and the line widht set using setLineWidth.


-fillPath

Fills the path that was added the latest.

fillPath()

The path that was latest added to the context is filles with the color set using setFillColor.


-drawText

Draws text at a position.

drawText(text: string, pos: Point)

Call this to draw a text string to the context. The top-left of the text will be drawn at the specified position.

Parameters

text
string
Text to draw.

pos
Point
Position to draw the top-left of the text at.


-drawTextInRect

Draws text in a rectangle.

drawTextInRect(text: string, rect: Rect)

Call this to draw a text string in a rectangle. Specify how the text should be aligned within the rectangle by calling setTextAlignedLeft, setTextAlignedCenter or setTextAlignedRight before drawing the text.

Parameters

text
string
Text to draw.

rect
Rect
Rectangle to draw text in.


-setFontSize

Sets the font size used when drawing text.

setFontSize(size: number)

Sets the font size to be used when drawing text strings to the context.

Parameters

size
number
Font size to use when drawing text.


-setTextColor

Sets the text color used when drawing text.

setTextColor(color: Color)

Sets the text color to be used when drawing text strings to the context.

Parameters

color
Color
Color to use when drawing text.


-setTextAlignedLeft

Specifies that texts should be left aligned.

setTextAlignedLeft()

Sets text alignment to left. Texts drawn after calling this will be left aligned inside the provided rectangle.


-setTextAlignedCenter

Specifies that texts should be center aligned.

setTextAlignedCenter()

Sets text alignment to center. Texts drawn after calling this will be center aligned inside the provided rectangle.


-setTextAlignedRight

Specifies that texts should be right aligned.

setTextAlignedRight()

Sets text alignment to right. Texts drawn after calling this will be right aligned inside the provided rectangle.