The width of drawing surface, in context units (not in pixels, unless scale is 1.0).
The height of drawing surface, in context units (not in pixels, unless scale is 1.0).
Optionalscale: numberThe optional scale factor for mapping from context units to pixels. The default is 1.0 which means that the width and height are in pixels.
OptionalbackColor: Color | nullAn optional background color to fill the drawing surface.
An object manager that controls the lifetime of the BmpContext object.
The width of drawing surface, in context units (not in pixels, unless scale is 1.0).
The height of drawing surface, in context units (not in pixels, unless scale is 1.0).
Optionalscale: numberThe optional scale factor for mapping from context units to pixels. The default is 1.0 which means that the width and height are in pixels.
OptionalbackColor: Color | nullAn optional background color to fill the drawing surface.
Gets or sets a value indicating whether the graphic objects are drawn without anti-aliasing.
Gets or sets a value indicating whether the graphic objects are drawn without anti-aliasing.
Gets or sets a value indicating that copying pixels from the BmpContext#backgroundBitmap to the target bitmap should not be marked as changed in the BmpContext#updatedPixelMask. The default is false, indicating that pixels copied from the background bitmap to the target are marked as changed.
Gets or sets a value indicating that copying pixels from the BmpContext#backgroundBitmap to the target bitmap should not be marked as changed in the BmpContext#updatedPixelMask. The default is false, indicating that pixels copied from the background bitmap to the target are marked as changed.
Gets or sets a value indicating if text is rendered using the graphic paths instead of the specialized text drawing services. Assigning a null value resets the property to a default value that depends on context type. This property does not affect drawing to BmpContext.
Gets or sets a value indicating if text is rendered using the graphic paths instead of the specialized text drawing services. Assigning a null value resets the property to a default value that depends on context type. This property does not affect drawing to BmpContext.
Gets or sets the FontCollection used by measureText and DrawingContext#drawText/DrawingContext#drawLayout methods.
Gets or sets the FontCollection used by measureText and DrawingContext#drawText/DrawingContext#drawLayout methods.
Gets or sets a value specifying whether text is always drawn with antialiasing regardless the value of the 'aliased' property.
Gets or sets a value specifying whether text is always drawn with antialiasing regardless the value of the 'aliased' property.
Gets the height of the context, in context graphic units.
Gets the reference to the object.
Gets or sets the sampling mode to use when drawing images with resizing.
Gets or sets the sampling mode to use when drawing images with resizing.
Gets or sets the transformation matrix. The matrix consists of six numbers (their meaning is simplified for clarity): m11 - scales the drawing horizontally m12 - skew the the drawing horizontally m21 - skew the the drawing vertically m22 - scales the drawing vertically m31 - moves the the drawing horizontally m32 - moves the the drawing vertically
Gets or sets the transformation matrix. The matrix consists of six numbers (their meaning is simplified for clarity): m11 - scales the drawing horizontally m12 - skew the the drawing horizontally m21 - skew the the drawing vertically m22 - scales the drawing vertically m31 - moves the the drawing horizontally m32 - moves the the drawing vertically
Gets the owner ObjectManager instance.
Gets or sets a value indicating whether the antialiasing algorithm should produce better quality with lower speed.
Gets or sets a value indicating whether the antialiasing algorithm should produce better quality with lower speed.
Gets or sets a GrayscaleBitmap providing transparency mask for all drawing and filling operations. Pixels in the mask with value 0 are fully opaque and will completely mask any drawing (i.e. the pixels of the target bitmap will remain unchanged). Pixels in the mask with value 255 are fully transparent, i.e. any drawing will have the same effect as if there was no mask. Pixels with values between 0 and 255 will modify the transparency of the pixels being drawn according to their value. Note that the transparency mask bitmap must be of the same pixel size as the target bitmap.
Gets or sets a GrayscaleBitmap providing transparency mask for all drawing and filling operations. Pixels in the mask with value 0 are fully opaque and will completely mask any drawing (i.e. the pixels of the target bitmap will remain unchanged). Pixels in the mask with value 255 are fully transparent, i.e. any drawing will have the same effect as if there was no mask. Pixels with values between 0 and 255 will modify the transparency of the pixels being drawn according to their value. Note that the transparency mask bitmap must be of the same pixel size as the target bitmap.
Gets the type of DrawingContext.
Gets or sets a BilevelBitmap to monitor changes in the target bitmap. Its pixels are used as boolean flags indicating changes in the corresponding pixels of the target bitmap. When a pixel in the target bitmap is changed, the corresponding pixel in this bitmap is set to 1 (true). The BilevelBitmap must have the same pixel size as the target bitmap. It is user's responsibility to clear this bitmap (fill it with zeros) before any drawing on the target occurs.
Gets or sets a BilevelBitmap to monitor changes in the target bitmap. Its pixels are used as boolean flags indicating changes in the corresponding pixels of the target bitmap. When a pixel in the target bitmap is changed, the corresponding pixel in this bitmap is set to 1 (true). The BilevelBitmap must have the same pixel size as the target bitmap. It is user's responsibility to clear this bitmap (fill it with zeros) before any drawing on the target occurs.
Gets the width of the context, in context graphic units.
Draws and fills an ellipse.
The X coordinate of the rectangle enclosing an ellipse.
The Y coordinate of the rectangle enclosing an ellipse.
The width of the rectangle enclosing an ellipse.
The height of the rectangle enclosing an ellipse.
The options for drawing and filling an ellipse.
Draws and fills an ellipse.
The rectangle enclosing an ellipse.
The options for drawing and filling an ellipse.
Draws an image or bitmap with specified size, location, and opacity.
The image object to draw.
The X coordinate of the destination rectangle.
The Y coordinate of the destination rectangle.
The width of the destination rectangle.
The height of the destination rectangle.
OptionaldrawImageOptions: DrawImageOptionsThe options for drawing an image.
Draws an image or bitmap with specified size, location, and opacity.
The image object to draw.
The destination rectangle.
OptionaldrawImageOptions: DrawImageOptionsThe options for drawing an image.
Draws a Layout at the specified position.
An existing Layout object or the properties describing a new Layout settings.
The X coordinate at which to draw the Layout.
The Y coordinate at which to draw the Layout.
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();
Draws a line between two points, using the specified pen.
The X coordinate of the first point.
The Y coordinate of the first point.
The X coordinate of the second point.
The Y coordinate of the second point.
The Pen object or settings for creating a pen.
Draws a series of connected lines, using a specified pen.
The array of points to connect.
The Pen object or settings for creating a pen.
Draws and fills a graphics path.
The GraphicsPath object to draw.
The options for drawing and filling the GraphicsPath.
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();
Draws and fills a polygon.
The array of points or a quadrilateral specifying the polygon.
The options for drawing and filling a polygon.
Draws and fills a rectangle or rounded rectangle.
The X coordinate of the rectangle.
The Y coordinate of the rectangle.
The width of the rectangle.
The height of the rectangle.
The options for drawing and filling a rectangle.
Draws and fills a rectangle or rounded rectangle.
The rectangle bounds.
The options for drawing and filling a rectangle.
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.
The SvgDocument to draw.
The X coordinate of SVG viewport.
The Y coordinate of SVG viewport.
Optionalopacity: numberThe opacity factor to be applied to SVG content, between 0.0 (fully transparent) and 1.0 (fully opaque). The default is 1.0.
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();
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.
The SvgDocument to draw.
The X coordinate of SVG content.
The Y coordinate of SVG content.
Optionalopacity: numberThe opacity factor to be applied to SVG content, between 0.0 (fully transparent) and 1.0 (fully opaque). The default is 1.0.
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.
The SvgDocument to draw.
The X coordinate of the target rectangle for SVG content.
The Y coordinate of the target rectangle for SVG content.
The width of the target rectangle for SVG content.
The height of the target rectangle for SVG content.
Optionalopacity: numberThe opacity factor to be applied to SVG content, between 0.0 (fully transparent) and 1.0 (fully opaque). The default is 1.0.
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.
The SvgDocument to draw.
The target rectangle for SVG content.
Optionalopacity: numberThe opacity factor to be applied to SVG content, between 0.0 (fully transparent) and 1.0 (fully opaque). The default is 1.0.
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.
The SvgDocument to draw.
The X coordinate of the target rectangle for SVG viewport.
The Y coordinate of the target rectangle for SVG viewport.
The width of the target rectangle for SVG viewport.
The height of the target rectangle for SVG viewport.
Optionalopacity: numberThe opacity factor to be applied to SVG content, between 0.0 (fully transparent) and 1.0 (fully opaque). The default is 1.0.
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.
The SvgDocument to draw.
The target rectangle for SVG viewport.
Optionalopacity: numberThe opacity factor to be applied to the SVG content, between 0.0 (fully transparent) and 1.0 (fully opaque). The default is 1.0.
Draws text using a specified format at the specified position.
The text to draw.
The text format to use.
The X coordinate at which to draw the text.
The Y coordinate at which to draw the text.
OptionalmaxWidth: number | nullIf provided, specifies the maximum width of text.
Draws text using a specified attributes at a specified location.
The text to draw.
The font to use.
The font size.
The text color.
The X coordinate at which to draw the text.
The Y coordinate at which to draw the text.
OptionalmaxWidth: number | nullIf provided, specifies the maximum width of text.
Draws a text run at the specified position.
The formatted text section to draw.
The X coordinate at which to draw the text.
The Y coordinate at which to draw the text.
OptionalmaxWidth: number | nullIf provided, specifies the maximum width of text.
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();
Detaches the object from the ObjectManager and deallocates its memory, if possible.
Measures text using a specified font, font size and layout width.
The string to measure.
The font to use.
The font size to use.
OptionalmaxWidth: number | nullIf provided, specifies the maximum width of text.
The actual size needed to draw the text.
Measures the size of the given text run.
The formatted text section to measure.
OptionalmaxWidth: number | nullIf provided, specifies the maximum width of text.
The actual size needed to draw the text.
Removes the last clip. After this method is called, the last clip is no longer applied to subsequent drawing operations.
Stops redirecting drawing operations to the transparency layer that was created by the last pushLayer call.
Restores the previously pushed transformation from the stack.
Specifies a rectangle to which all subsequent drawing operations are clipped.
The X coordinate of the clipping rectangle.
The Y coordinate of the clipping rectangle.
The width of the clipping rectangle.
The height of the clipping rectangle.
Specifies a rectangle to which all subsequent drawing operations are clipped.
The clipping rectangle.
Specifies a path to which all subsequent drawing operations are clipped.
The GraphicsPath object defining clipping area.
Adds a transparency layer to the target surface. That layer receives all subsequent drawing operations until popLayer is called.
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.
OptionalcontentBounds: Bounds | nullThe 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.
Saves the current transformation to the stack.
Rebinds the object from the current ObjectManager to the specified one.
The new ObjectManager for the object.
Resets the transformation to the identity matrix.
Applies the rotation transformation.
The rotation angle.
OptionalangleUnits: AngleUnitsThe angle units. The default is Degrees.
Optionalcx: numberThe optional center point X offset.
Optionalcy: numberThe optional center point Y offset.
Applies the scaling transformation.
The value to scale by on the X and Y axes.
Optionalcx: numberThe optional center point X offset.
Optionalcy: numberThe optional center point Y offset.
Applies the scaling transformation.
The value to scale by on the X axis.
The value to scale by on the Y axis.
Optionalcx: numberThe optional center point X offset.
Optionalcy: numberThe optional center point Y offset.
Applies the skew transformation.
The X angle.
The Y angle.
OptionalangleUnits: AngleUnitsThe angle units. The default is Degrees.
Optionalcx: numberThe optional center point X offset.
Optionalcy: numberThe optional center point Y offset.
Applies the skew transformation along the X axis.
The X angle.
OptionalangleUnits: AngleUnitsThe angle units. The default is Degrees.
Applies the skew transformation along the Y axis.
The Y angle.
OptionalangleUnits: AngleUnitsThe angle units. The default is Degrees.
Applies the translation transformation.
The horizontal offset.
The vertical offset.
Represents a drawing context for a Bitmap.