ScriptX

Appearance

DrawContext ​

2D drawing context for creating images programmatically

DrawContext provides a canvas for drawing shapes, text, and images.

Use DrawContext to:

Examples ​

javascript
let ctx = new DrawContext();
ctx.size = new Size(200, 200);
ctx.setFillColor(new Color("#ff0000"));
ctx.fillRect(new Rect(10, 10, 100, 100));
let image = ctx.getImage();
javascript
let ctx = new DrawContext();
ctx.size = new Size(200, 50);
ctx.setFont(Font.boldSystemFont(20));
ctx.setTextColor(new Color("#000000"));
ctx.drawText("Hello", new Point(10, 10));

Properties ​

size ​

  • Type: JSValue

Canvas size

Set the dimensions of the drawing canvas.

javascript
ctx.size = new Size(200, 200)

opaque ​

  • Type: Bool

Whether the canvas is opaque

If true, the canvas has no transparency. Default is true.

javascript
ctx.opaque = false

respectScreenScale ​

  • Type: Bool

Whether to use screen scale

If true, renders at device screen scale for sharper images. Default is true.

javascript
ctx.respectScreenScale = true

Methods ​

setFillColor ​

Set fill color for shapes

typescript
setFillColor(color): void
  • color - Color as hex string or Color object

Example:

javascript
ctx.setFillColor(new Color("#ff0000"))

setStrokeColor ​

Set stroke color for outlines

typescript
setStrokeColor(color): void
  • color - Color as hex string or Color object

Example:

javascript
ctx.setStrokeColor(new Color("#0000ff"))

setLineWidth ​

Set line width for strokes

typescript
setLineWidth(width): void
  • width - Line width in points

Example:

javascript
ctx.setLineWidth(2)

addPath ​

Add a path to the context

typescript
addPath(path): void
  • path - Path object to add

Example:

javascript
ctx.addPath(path)

fillPath ​

Fill the current path

Fills the previously added path with the current fill color.

typescript
fillPath(): void

Example:

javascript
ctx.fillPath()

strokePath ​

Stroke the current path

Draws the outline of the previously added path.

typescript
strokePath(): void

Example:

javascript
ctx.strokePath()

fill ​

Fill a rectangle (alias for fillRect)

typescript
fill(rect): void
  • rect - Rectangle to fill

Example:

javascript
ctx.fill(rect)

fillRect ​

Fill a rectangle

typescript
fillRect(rect): void
  • rect - Rectangle to fill

Example:

javascript
ctx.fillRect(new Rect(0, 0, 100, 100))

fillEllipse ​

Fill an ellipse

Fills an ellipse inscribed in the given rectangle.

typescript
fillEllipse(rect): void
  • rect - Bounding rectangle for the ellipse

Example:

javascript
ctx.fillEllipse(new Rect(0, 0, 100, 100))

stroke ​

Stroke a rectangle (alias for strokeRect)

typescript
stroke(rect): void
  • rect - Rectangle to stroke

Example:

javascript
ctx.stroke(rect)

strokeRect ​

Stroke a rectangle outline

typescript
strokeRect(rect): void
  • rect - Rectangle to stroke

Example:

javascript
ctx.strokeRect(new Rect(0, 0, 100, 100))

strokeEllipse ​

Stroke an ellipse outline

typescript
strokeEllipse(rect): void
  • rect - Bounding rectangle for the ellipse

Example:

javascript
ctx.strokeEllipse(new Rect(0, 0, 100, 100))

drawImageInRect ​

Draw image in a rectangle

Draws an image scaled to fit the specified rectangle.

typescript
drawImageInRect(imageData, rect): void
  • imageData - Image object to draw
  • rect - Destination rectangle

Example:

javascript
ctx.drawImageInRect(image, new Rect(0, 0, 100, 100))

drawImageAtPoint ​

Draw image at a point

Draws an image at its original size at the specified point.

typescript
drawImageAtPoint(imageData, point): void
  • imageData - Image object to draw
  • point - Top-left position for the image

Example:

javascript
ctx.drawImageAtPoint(image, new Point(10, 10))

drawText ​

Draw text at a point

Draws text at the specified position using current font and color.

typescript
drawText(text, pos): void
  • text - Text string to draw
  • pos - Position for the text baseline

Example:

javascript
ctx.drawText("Hello", new Point(10, 10))

drawTextInRect ​

Draw text in a rectangle

Draws text constrained to a rectangle with word wrapping.

typescript
drawTextInRect(text, rect): void
  • text - Text string to draw
  • rect - Bounding rectangle for text layout

Example:

javascript
ctx.drawTextInRect("Hello World", new Rect(0, 0, 100, 50))

setFont ​

Set the font for text drawing

typescript
setFont(font): void
  • font - Font object with size and weight

Example:

javascript
ctx.setFont(Font.boldSystemFont(20))

setFontSize ​

Set font size (deprecated)

Use setFont() instead for better control.

typescript
setFontSize(size): void
  • size - Font size in points

Example:

javascript
ctx.setFontSize(14)

setTextColor ​

Set text color

typescript
setTextColor(color): void
  • color - Color as hex string

Example:

javascript
ctx.setTextColor("#000000")

setTextAlignedLeft ​

Align text to the left

typescript
setTextAlignedLeft(): void

Example:

javascript
ctx.setTextAlignedLeft()

setTextAlignedCenter ​

Align text to the center

typescript
setTextAlignedCenter(): void

Example:

javascript
ctx.setTextAlignedCenter()

setTextAlignedRight ​

Align text to the right

typescript
setTextAlignedRight(): void

Example:

javascript
ctx.setTextAlignedRight()

getImage ​

Get the rendered image

Returns the drawing as an image object.

typescript
getImage(): object

Returns: Image object with base64 data, width, and height

Example:

javascript
let image = ctx.getImage()