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 false.

opaque: bool

-new DrawContext

Constructs a canvas to draw on.

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

new DrawContext()

-getImage

Retrieves the image.

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

getImage(): Image

-drawImageInRect

Draws an image in the specified rect.

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

drawImageInRect(image: Image, rect: Rect)

-drawImageAtPoint

Draws an image at the specified point.

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

drawImageAtPoint(image: Image, point: Point)

-setFillColor

Sets the fill 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.

setFillColor(color: Color)

-setStrokeColor

Sets the stroke 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.

setStrokeColor(color: Color)

-setLineWidth

Sets the line width for stroking.

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

setLineWidth(width: number)

-fill

Fills a rectangle.

Fills the rectangle width the color set when calling setFillColor.

fill(rect: Rect)

-fillRect

Fills a rectangle.

Fills the rectangle width the color set when calling setFillColor.

fillRect(rect: Rect)

-fillEllipse

Fills an ellipse.

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

fillEllipse(rect: Rect)

-stroke

Strokes a rectangle.

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

stroke(rect: Rect)

-strokeRect

Strokes a rectangle.

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

strokeRect(rect: Rect)

-strokeEllipse

Strokes a rectangle.

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.

strokeEllipse(rect: Rect)

-addPath

Adds a path to the context.

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.

addPath(path: Path)

-strokePath

Strokes the path that was added the latest.

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

strokePath()

-fillPath

Fills the path that was added the latest.

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

fillPath()

-drawText

Draws text at a position.

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

drawText(text: string, pos: Point)

-drawTextInRect

Draws text in a rectangle.

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.

drawTextInRect(text: string, rect: Rect)

-setFontSize

Sets the font size used when drawing text.

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

setFontSize(size: number)

-setTextColor

Sets the text color used when drawing text.

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

setTextColor(color: Color)

-setTextAlignedLeft

Specifies that texts should be left aligned.

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

setTextAlignedLeft()

-setTextAlignedCenter

Specifies that texts should be center aligned.

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

setTextAlignedCenter()

-setTextAlignedRight

Specifies that texts should be right aligned.

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

setTextAlignedRight()