SvgContext

DrawingContext.drawEllipse

The rectangle enclosing an ellipse.

drawEllipseOptions

DrawEllipseOptions

The options for drawing and filling an ellipse.

Returns

void

Inherited from

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

Inherited from

DrawingContext.drawImage

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

DrawingContext.drawImage

The destination rectangle.

drawImageOptions?

DrawImageOptions

The options for drawing an image.

Returns

void

Inherited from

drawLayout()

drawLayout(
   layout, 
   x, 
   y): void;

Draws a Layout at the specified position.

Parameters

layout

| Layout | LayoutProperties

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

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();

Inherited from

DrawingContext.drawLayout

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

Pen | PenProperties

The Pen object or settings for creating a pen.

Returns

void

Inherited from

DrawingContext.drawLine

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

Pen | PenProperties

The Pen object or settings for creating a pen.

Returns

void

Inherited from

DrawingContext.drawLines

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();

Inherited from

DrawingContext.drawPath

drawPolygon()

drawPolygon(points, drawPolygonOptions): void;

Draws and fills a polygon.

Parameters

points

| Point[] | Quadrilateral

The array of points or a quadrilateral specifying the polygon.

drawPolygonOptions

DrawPolygonOptions

The options for drawing and filling a polygon.

Returns

void

Inherited from

DrawingContext.drawPolygon

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

Inherited from

DrawingContext.drawRect

Call Signature

drawRect(bounds, drawRectangleOptions): void;

Draws and fills a rectangle or rounded rectangle.

Parameters

bounds

DrawingContext.drawRect

The rectangle bounds.

drawRectangleOptions

DrawRectangleOptions

The options for drawing and filling a rectangle.

Returns

void

Inherited from

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

DrawingContext.drawSvg

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();

Inherited from

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

DrawingContext.drawSvgContent

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

Inherited from

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

DrawingContext.drawSvgToContentRect

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

Inherited from

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

DrawingContext.drawSvgToContentRect

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

Inherited from

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

DrawingContext.drawSvgToRect

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

Inherited from

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

DrawingContext.drawSvgToRect

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

Inherited from

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?

number

If provided, specifies the maximum width of text.

Returns

void

Inherited from

DrawingContext.drawText

Call Signature

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

Draws text using specified format 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?

number

If provided, specifies the maximum width of text.

Returns

void

Inherited from

DrawingContext.drawText

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?

number

If provided, specifies the maximum width of text.

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();

Inherited from

DrawingContext.drawText

free()

free(): void;

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

Returns

void

Inherited from

DrawingContext.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?

number

If provided, specifies the maximum width of text.

Returns

Size

The actual size needed to draw the text.

Inherited from

DrawingContext.measureText

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?

number

If provided, specifies the maximum width of text.

Returns

Size

The actual size needed to draw the text.

Inherited from

DrawingContext.measureText

Call Signature

measureText(textRun, maxWidth?): Size;

Measures the size of the given text run.

Parameters

textRun

RunProperties

The formatted text section to measure.

maxWidth?

number

If provided, specifies the maximum width of text.

Returns

Size

The actual size needed to draw the text.

Inherited from

DrawingContext.measureText

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

Inherited from

DrawingContext.popClip

popGroup()

popGroup(): void;

Ends the group that was created by the last SvgContext#pushGroup call.

Returns

void

popLayer()

popLayer(): void;

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

Returns

void

Inherited from

DrawingContext.popLayer

popTransform()

popTransform(): void;

Restores the previously pushed transformation from the stack.

Returns

void

Inherited from

DrawingContext.popTransform

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

Inherited from

DrawingContext.pushClip

Call Signature

pushClip(bounds): void;

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

Parameters

bounds

DrawingContext.pushClip

The clipping rectangle.

Returns

void

Inherited from

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

Inherited from

DrawingContext.pushClip

pushGroup()

Call Signature

pushGroup(
   attributeName, 
   value, 
   namespace?): void;

Starts a group ('g') element with custom attributes in the SVG document. Call the SvgContext#popGroup method to end the group.

Parameters

attributeName

string

The name of the attribute, including the optional prefix.

value

string

A string value of the attribute.

namespace?

string

The optional namespace of the attribute.

Returns

void

Call Signature

pushGroup(attributes): void;

Starts a group ('g') element with custom attributes in the SVG document. Call the SvgContext#popGroup method to end the group.

Parameters

attributes

SvgAttribute[]

The list of attributes to be associated with the group.

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?

DrawingContext.pushLayer

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.

Returns

void

Inherited from

pushTransform()

pushTransform(): void;

Saves the current transformation to the stack.

Returns

void

Inherited from

DrawingContext.pushTransform

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

DrawingContext.rebind

resetTransform()

resetTransform(): void;

Resets the transformation to the identity matrix.

Returns

void

Inherited from

DrawingContext.resetTransform

rotate()

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

Applies the rotation transformation.

Parameters

angle

number

The rotation angle.

angleUnits?

DrawingContext.rotate

The angle units. The default is Radians.

cx?

number

The optional center point X offset.

cy?

number

The optional center point Y offset.

Returns

void

Inherited from

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

Inherited from

DrawingContext.scale

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

Inherited from

DrawingContext.scaleXY

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

cx?

number

The optional center point X offset.

cy?

number

The optional center point Y offset.

Returns

void

Inherited from

DrawingContext.skew

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

Returns

void

Inherited from

DrawingContext.skewX

skewY()

skewY(angle, angleUnits?): void;

Applies the skew transformation along the Y axis.

Parameters

angle

number

The Y angle.

angleUnits?

The angle units. The default is Radians.

Returns

void

Inherited from

DrawingContext.skewY

toSvgDocument()

toSvgDocument(): SvgDocument;

Generates a SvgDocument from this context, and clears the context's command list afterwards.

Returns