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. At any point after beginning your drawing and before ending your drawing can you call getImage() to get an image object of your drawing.
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.
-getImage¶
Retrieves the image.
getImage(): Image
Call this to retrieve the image you have drawn to the context.
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 with the color set when calling setFillColor.
Parameters¶
rect
Rect
Rectangle to fill.
-fillRect¶
Fills a rectangle.
fillRect(rect: Rect)
Fills the rectangle with 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 an ellipse.
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 added the latest to the context is stroked with the color set using setStrokeColor and the line width set using setLineWidth.
-fillPath¶
Fills the path that was added the latest.
fillPath()
The path that was latest added to the context is filled 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.
-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.
Deprecated in version 1.5. Use the setFont() function instead.
setFontSize(size: number)
Sets the font size to be used when drawing texts to the context.
Parameters¶
size
number
Font size to use when drawing text.
-setFont¶
Sets the font to use when drawing text.
setFont(font: Font)
Sets the font to be used when drawing texts to the context.
Parameters¶
font
Font
Font 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.