DrawingContext

The rectangle enclosing an ellipse.

drawEllipseOptions

DrawEllipseOptions

The options for drawing and filling an ellipse.

Returns

void

drawImage()

Call Signature

drawImage(image, x, y, width, height, drawImageOptions?): void

Draws an image or bitmap with specified size, location, and opacity.

Parameters

image

ImageOrBitmap

The image object to draw.

x

number

The X coordinate of the destination rectangle.

y

number

The Y coordinate of the destination rectangle.

width

number

The width of the destination rectangle.

height

number

The height of the destination rectangle.

drawImageOptions?

DrawImageOptions

The options for drawing an image.

Returns

void

Call Signature

drawImage(image, bounds, drawImageOptions?): void

Draws an image or bitmap with specified size, location, and opacity.

Parameters

image

ImageOrBitmap

The image object to draw.

bounds

The destination rectangle.

drawImageOptions?

DrawImageOptions

The options for drawing an image.

Returns

void

drawLayout()

drawLayout(layout, x, y): void

Draws a Layout at the specified position.

Parameters

layout

An existing Layout object or the properties describing a new Layout settings.

Layout | LayoutProperties

x

number

The X coordinate at which to draw the Layout.

y

number

The Y coordinate at which to draw the Layout.

Returns

void

Example

const font = Font.getPdfFont(StandardPdfFont.CourierBold);
const sb = new SolidBrush("CadetBlue");
const lgb = new LinearGradientBrush({
    startColor: "Red", startPoint: { x: 0, y: 0 },
    gradientStops: [{ offset: 0.5, color: "Green" }],
    endColor: "Blue", endPoint: { x: 1, y: 0 }
});
const rgb = new RadialGradientBrush({ startColor: "Red", endColor: "Green" });

const bitmap = new Bitmap(600, 420);
const ctx = bitmap.newContext({ backColor: "Yellow" });
const tf = new Format({ font: font, fontSize: 40 });

ctx.drawLayout({
    maxWidth: 600,
    firstLineIndent: 50,
    runs: [
      { text: "test font Solid fill brush in DsPdfJS\n", format: tf,
        fillBrush: sb },
      { text: "test Linear Gradient fill in DsPdfJS\n", format: tf,
        fillBrush: lgb },
      { text: "test Radial Gradient fill that spans multiple lines in DsPdfJS",
        format: tf, fillBrush: rgb }
    ]
}, 0, 0);

const res: Uint8Array = bitmap.saveAsPng();

drawLine()

drawLine(x1, y1, x2, y2, pen): void

Draws a line between two points, using the specified pen.

Parameters

x1

number

The X coordinate of the first point.

y1

number

The Y coordinate of the first point.

x2

number

The X coordinate of the second point.

y2

number

The Y coordinate of the second point.

pen

The Pen object or settings for creating a pen.

Pen | PenProperties

Returns

void

drawLines()

drawLines(points, pen): void

Draws a series of connected lines, using a specified pen.

Parameters

points

Point[]

The array of points to connect.

pen

The Pen object or settings for creating a pen.

Pen | PenProperties

Returns

void

drawPath()

drawPath(path, drawPathOptions): void

Draws and fills a graphics path.

Parameters

path

GraphicsPath

The GraphicsPath object to draw.

drawPathOptions

DrawPathOptions

The options for drawing and filling the GraphicsPath.

Returns

void

Example

const ctx = new BmpContext(800, 600, 0.5, "Honeydew");

const path = ctx.createPath();

path.beginFigure(100, 350);
path.addLine(210, 310);
path.addArc({
    size: { width: 183, height: 173 },
    sweepDirection: SweepDirection.Clockwise,
    point: { x: 550, y: 205 }
});
path.addLine(650, 170);
path.addLine(680, 250);
path.addLine(575, 285);
path.addArc({
    size: { width: 183, height: 173 },
    sweepDirection: SweepDirection.Clockwise,
    point: { x: 240, y: 390 }
});
path.addLine(130, 430);
path.endFigure(true);
path.addEllipse({ x: 295, y: 197, width: 200, height: 190 });

ctx.drawPath(path, {
    fillColor: "MediumAquamarine",
    lineColor: "Green",
    lineWidth: 20
});

const res: Uint8Array = ctx.bitmap.saveAsPng();

drawPolygon()

drawPolygon(points, drawPolygonOptions): void

Draws and fills a polygon.

Parameters

points

The array of points or a quadrilateral specifying the polygon.

Point[] | Quadrilateral

drawPolygonOptions

DrawPolygonOptions

The options for drawing and filling a polygon.

Returns

void

drawRect()

Call Signature

drawRect(x, y, width, height, drawRectangleOptions): void

Draws and fills a rectangle or rounded rectangle.

Parameters

x

number

The X coordinate of the rectangle.

y

number

The Y coordinate of the rectangle.

width

number

The width of the rectangle.

height

number

The height of the rectangle.

drawRectangleOptions

DrawRectangleOptions

The options for drawing and filling a rectangle.

Returns

void

Call Signature

drawRect(bounds, drawRectangleOptions): void

Draws and fills a rectangle or rounded rectangle.

Parameters

bounds

The rectangle bounds.

drawRectangleOptions

DrawRectangleOptions

The options for drawing and filling a rectangle.

Returns

void

drawSvg()

drawSvg(svgDocument, x, y, opacity?): void

Draws a SvgDocument at a point specifying the position of SVG viewport. To specify the position of SVG content rather than viewport, see the drawSvgContent method.

Parameters

svgDocument

The SvgDocument to draw.

x

number

The X coordinate of SVG viewport.

y

number

The Y coordinate of SVG viewport.

opacity?

number

The opacity factor to be applied to SVG content, between 0.0 (fully transparent) and 1.0 (fully opaque). The default is 1.0.

Returns

void

Example

const svgDoc = SvgDocument.load(svgData);
const margin = 50;

const rect = svgDoc.measure(0, 0);
const ctx = new BmpContext(
    rect.width + margin * 2,
    rect.height + margin * 2,
    0.7,
    "Linen"
});
ctx.slowAntialiasing = true;
ctx.drawSvg(svgDoc, -rect.x + margin, -rect.y + margin);

const res: Uint8Array = ctx.bitmap.saveAsPng();

drawSvgContent()

drawSvgContent(svgDocument, x, y, opacity?): void

Draws the content of a specified SvgDocument at a point specifying the top-left corner of SVG content. To specify the position of SVG viewport rather than content, see the drawSvg method.

Parameters

svgDocument

The SvgDocument to draw.

x

number

The X coordinate of SVG content.

y

number

The Y coordinate of SVG content.

opacity?

number

The opacity factor to be applied to SVG content, between 0.0 (fully transparent) and 1.0 (fully opaque). The default is 1.0.

Returns

void

drawSvgToContentRect()

Call Signature

drawSvgToContentRect(svgDocument, contentX, contentY, contentWidth, contentHeight, opacity?): void

Draws the content of a specified SvgDocument, resizing the content to fit into a specified rectangle. To draw the SVG resizing its viewport rather than just the content, see the drawSvgToRect method.

Parameters

svgDocument

The SvgDocument to draw.

contentX

number

The X coordinate of the target rectangle for SVG content.

contentY

number

The Y coordinate of the target rectangle for SVG content.

contentWidth

number

The width of the target rectangle for SVG content.

contentHeight

number

The height of the target rectangle for SVG content.

opacity?

number

The opacity factor to be applied to SVG content, between 0.0 (fully transparent) and 1.0 (fully opaque). The default is 1.0.

Returns

void

Call Signature

drawSvgToContentRect(svgDocument, contentBounds, opacity?): void

Draws the content of a specified SvgDocument, resizing the content to fit into a specified rectangle. To draw the SVG resizing its viewport rather than just the content, see the drawSvgToRect method.

Parameters

svgDocument

The SvgDocument to draw.

contentBounds

The target rectangle for SVG content.

opacity?

number

The opacity factor to be applied to SVG content, between 0.0 (fully transparent) and 1.0 (fully opaque). The default is 1.0.

Returns

void

drawSvgToRect()

Call Signature

drawSvgToRect(svgDocument, x, y, width, height, opacity?): void

Draws a SvgDocument, resizing its viewport to fit into the specified rectangle. To draw just the content of the SVG ignoring viewport position, see the drawSvgToContentRect method.

Parameters

svgDocument

The SvgDocument to draw.

x

number

The X coordinate of the target rectangle for SVG viewport.

y

number

The Y coordinate of the target rectangle for SVG viewport.

width

number

The width of the target rectangle for SVG viewport.

height

number

The height of the target rectangle for SVG viewport.

opacity?

number

The opacity factor to be applied to SVG content, between 0.0 (fully transparent) and 1.0 (fully opaque). The default is 1.0.

Returns

void

Call Signature

drawSvgToRect(svgDocument, bounds, opacity?): void

Draws a SvgDocument, resizing its viewport to fit into the specified rectangle. To draw just the content of the SVG ignoring viewport position, see the drawSvgToContentRect method.

Parameters

svgDocument

The SvgDocument to draw.

bounds

The target rectangle for SVG viewport.

opacity?

number

The opacity factor to be applied to the SVG content, between 0.0 (fully transparent) and 1.0 (fully opaque). The default is 1.0.

Returns

void

drawText()

Call Signature

drawText(text, format, x, y, maxWidth?): void

Draws text using a specified format at the specified position.

Parameters

text

string

The text to draw.

format

Format

The text format to use.

x

number

The X coordinate at which to draw the text.

y

number

The Y coordinate at which to draw the text.

maxWidth?

If provided, specifies the maximum width of text.

number | null

Returns

void

Call Signature

drawText(text, font, fontSize, foreColor, x, y, maxWidth?): void

Draws text using a specified attributes at a specified location.

Parameters

text

string

The text to draw.

font

Font

The font to use.

foreColor

Color

The text color.

x

number

The X coordinate at which to draw the text.

y

number

The Y coordinate at which to draw the text.

maxWidth?

If provided, specifies the maximum width of text.

number | null

Returns

void

Call Signature

drawText(textRun, x, y, maxWidth?): void

Draws a text run at the specified position.

Parameters

textRun

RunProperties

The formatted text section to draw.

x

number

The X coordinate at which to draw the text.

y

number

The Y coordinate at which to draw the text.

maxWidth?

If provided, specifies the maximum width of text.

number | null

Returns

void

Example

const pericFont = Font.load(await Util.loadFontAsArray("peric.ttf"));
const emojiFont = Font.load(await Util.loadFontAsArray("seguiemj.ttf"));

const fontColl = new FontCollection();
fontColl.loadFont(await Util.loadFontAsArray("arial.ttf"));

const g = new BmpContext(540, 320, 2, "FloralWhite");
g.fontCollection = fontColl;

g.drawText("Peric Font", pericFont, 40, "Black", 4, 90);
g.drawText({ text: "Arial Font", fontFamily: "Arial", fontSize: 20 }, 300, 110);
g.drawText({
    text: "Emoji: " + String.fromCodePoint(0x1F433, 0x1F349, 0x1F367),
    font: emojiFont,
    fontSize: 40,
    paletteIndex: 0
}, 4, 140);

const res: Uint8Array = g.bitmap.saveAsPng();

free()

free(): void

Detaches the object from the ObjectManager and deallocates its memory, if possible.

Returns

void

Inherited from

ObjectBase.free

measureText()

Call Signature

measureText(text, format, maxWidth?): Size

Measures text using a specified Format.

Parameters

text

string

The string to measure.

format

Format

The text format to use.

maxWidth?

If provided, specifies the maximum width of text.

number | null

Returns

Size

The actual size needed to draw the text.

Call Signature

measureText(text, font, fontSize, maxWidth?): Size

Measures text using a specified font, font size and layout width.

Parameters

text

string

The string to measure.

font

Font

The font to use.

maxWidth?

If provided, specifies the maximum width of text.

number | null

Returns

Size

The actual size needed to draw the text.

Call Signature

measureText(textRun, maxWidth?): Size

Measures the size of the given text run.

Parameters

textRun

RunProperties

The formatted text section to measure.

maxWidth?

If provided, specifies the maximum width of text.

number | null

Returns

Size

The actual size needed to draw the text.

popClip()

popClip(): void

Removes the last clip. After this method is called, the last clip is no longer applied to subsequent drawing operations.

Returns

void

popLayer()

popLayer(): void

Stops redirecting drawing operations to the transparency layer that was created by the last pushLayer call.

Returns

void

popTransform()

popTransform(): void

Restores the previously pushed transformation from the stack.

Returns

void

pushClip()

Call Signature

pushClip(x, y, width, height): void

Specifies a rectangle to which all subsequent drawing operations are clipped.

Parameters

x

number

The X coordinate of the clipping rectangle.

y

number

The Y coordinate of the clipping rectangle.

width

number

The width of the clipping rectangle.

height

number

The height of the clipping rectangle.

Returns

void

Call Signature

pushClip(bounds): void

Specifies a rectangle to which all subsequent drawing operations are clipped.

Parameters

bounds

The clipping rectangle.

Returns

void

Call Signature

pushClip(path): void

Specifies a path to which all subsequent drawing operations are clipped.

Parameters

path

GraphicsPath

The GraphicsPath object defining clipping area.

Returns

void

pushLayer()

pushLayer(opacity, contentBounds?): void

Adds a transparency layer to the target surface. That layer receives all subsequent drawing operations until popLayer is called.

Parameters

opacity

number

An opacity value that is applied uniformly to all drawings in the layer when compositing to the backplate. The value is between 0.0 and 1.0.

contentBounds?

The content bounds of the transparency layer. Content won't render outside these bounds. If not set, the content bounds are effectively taken to be the bounds of the target surface.

Bounds | null

Returns

void

pushTransform()

pushTransform(): void

Saves the current transformation to the stack.

Returns

void

rebind()

rebind(omTo): void

Rebinds the object from the current ObjectManager to the specified one.

Parameters

omTo

ObjectManager

The new ObjectManager for the object.

Returns

void

Inherited from

ObjectBase.rebind

resetTransform()

resetTransform(): void

Resets the transformation to the identity matrix.

Returns

void

rotate()

rotate(angle, angleUnits?, cx?, cy?): void

Applies the rotation transformation.

Parameters

angle

number

The rotation angle.

angleUnits?

The angle units. The default is Degrees.

cx?

number

The optional center point X offset.

cy?

number

The optional center point Y offset.

Returns

void

scale()

scale(scaleFactor, cx?, cy?): void

Applies the scaling transformation.

Parameters

scaleFactor

number

The value to scale by on the X and Y axes.

cx?

number

The optional center point X offset.

cy?

number

The optional center point Y offset.

Returns

void

scaleXY()

scaleXY(scaleX, scaleY, cx?, cy?): void

Applies the scaling transformation.

Parameters

scaleX

number

The value to scale by on the X axis.

scaleY

number

The value to scale by on the Y axis.

cx?

number

The optional center point X offset.

cy?

number

The optional center point Y offset.

Returns

void

skew()

skew(angleX, angleY, angleUnits?, cx?, cy?): void

Applies the skew transformation.

Parameters

angleX

number

The X angle.

angleY

number

The Y angle.

angleUnits?

The angle units. The default is Degrees.

cx?

number

The optional center point X offset.

cy?

number

The optional center point Y offset.

Returns

void

skewX()

skewX(angle, angleUnits?): void

Applies the skew transformation along the X axis.

Parameters

angle

number

The X angle.

angleUnits?

The angle units. The default is Degrees.

Returns

void

skewY()

skewY(angle, angleUnits?): void

Applies the skew transformation along the Y axis.

Parameters

angle

number

The Y angle.

angleUnits?