Class TBGRACanvas2D

Description

Hierarchy

Fields

Methods

Properties

Unit

BGRACanvas2D

Declaration

type TBGRACanvas2D = class(IBGRAPath)

Description

Implementation of a canvas similar to HTML Canvas2d.

TBGRACanvas2D is the surface to use when rendering with TBGRASVG, TBGRACustomTypeWriter and TBGRAVectorizedFont.

Comparison between TBGRACanvas2D and Javascript HTML canvas:

blue_circular_bevel_js

BGRABitmap	JavaScript
uses BGRABitmap, BGRABitmapTypes, BGRACanvas2D; procedure TForm1.FormPaint(Sender: TObject); var bmp: TBGRABitmap; ctx: TBGRACanvas2D; gradient: IBGRACanvasGradient2D; begin bmp := TBGRABitmap.Create(ClientWidth, ClientHeight, StrToBGRA('#E0E2E5')); ctx := bmp.Canvas2d; // Draw the outer rounded rectangle gradient := ctx.createLinearGradient(100, 20, 100, 180); gradient.addColorStop(0, 'white'); gradient.addColorStop(1, '#7C878A'); ctx.fillStyle(gradient); ctx.beginPath(); ctx.roundRect(20, 20, 160, 160, 20); ctx.save(); ctx.shadowBlur := 10; ctx.shadowColor('rgba(0,0,0, .8)'); ctx.shadowOffsetX := 0; ctx.shadowOffsetY := 10; ctx.fill(); ctx.restore(); // Draw the blue circle with gradient gradient := ctx.createLinearGradient(100, 30, 100, 170); gradient.addColorStop(0, '#CAEBF5'); gradient.addColorStop(1, '#0F5369'); ctx.strokeStyle(gradient); ctx.beginPath(); ctx.arc(100, 100, 70, 0, Pi * 2); ctx.lineWidth := 10; ctx.stroke(); gradient := ctx.createLinearGradient(100, 50, 100, 150); gradient.addColorStop(0, '#003C50'); gradient.addColorStop(1, '#53E6FF'); ctx.strokeStyle(gradient); ctx.beginPath(); ctx.arc(100, 100, 60, 0, Pi * 2); ctx.lineWidth := 10; ctx.stroke(); bmp.Draw(Canvas, 0,0, true); bmp.Free; end;	Try on JSFiddle var my_canvas = document.getElementById('canvas'), ctx = my_canvas.getContext("2d"); ctx.fillStyle = "#E0E2E5"; ctx.fillRect(0, 0, 200, 200); // Draw the outer rounded rectangle var gradient = ctx.createLinearGradient(100, 20, 100, 180); gradient.addColorStop(0, "white"); gradient.addColorStop(1, "#7C878A"); ctx.fillStyle = gradient; ctx.beginPath(); ctx.roundRect(20, 20, 160, 160, 20); ctx.save(); ctx.shadowBlur = 10; ctx.shadowColor = "rgba(0,0,0, .6)"; ctx.shadowOffsetX = 0; ctx.shadowOffsetY = 10; ctx.fill(); ctx.restore(); // Draw the blue circle with gradient gradient = ctx.createLinearGradient(100, 30, 100, 170); gradient.addColorStop(0, "#CAEBF5"); gradient.addColorStop(1, "#0F5369"); ctx.strokeStyle = gradient; ctx.beginPath(); ctx.arc(100, 100, 70, 0, Math.PI * 2); ctx.lineWidth = 10; ctx.stroke(); gradient = ctx.createLinearGradient(100, 50, 100, 150); gradient.addColorStop(0, "#003C50"); gradient.addColorStop(1, "#53E6FF"); ctx.strokeStyle = gradient; ctx.beginPath(); ctx.arc(100, 100, 60, 0, Math.PI * 2); ctx.lineWidth = 10; ctx.stroke();

BGRABitmap

JavaScript

uses BGRABitmap, BGRABitmapTypes, BGRACanvas2D;

procedure TForm1.FormPaint(Sender: TObject);
var
  bmp: TBGRABitmap;
  ctx: TBGRACanvas2D;
  gradient: IBGRACanvasGradient2D;
begin
  bmp := TBGRABitmap.Create(ClientWidth, ClientHeight,
                            StrToBGRA('#E0E2E5'));
  ctx := bmp.Canvas2d;

  // Draw the outer rounded rectangle
  gradient := ctx.createLinearGradient(100, 20, 100, 180);
  gradient.addColorStop(0, 'white');
  gradient.addColorStop(1, '#7C878A');
  ctx.fillStyle(gradient);
  ctx.beginPath();
  ctx.roundRect(20, 20, 160, 160, 20);
  ctx.save();
  ctx.shadowBlur := 10;
  ctx.shadowColor('rgba(0,0,0, .8)');
  ctx.shadowOffsetX := 0;
  ctx.shadowOffsetY := 10;
  ctx.fill();
  ctx.restore();

  // Draw the blue circle with gradient
  gradient := ctx.createLinearGradient(100, 30, 100, 170);
  gradient.addColorStop(0, '#CAEBF5');
  gradient.addColorStop(1, '#0F5369');
  ctx.strokeStyle(gradient);
  ctx.beginPath();
  ctx.arc(100, 100, 70, 0, Pi * 2);
  ctx.lineWidth := 10;
  ctx.stroke();

  gradient := ctx.createLinearGradient(100, 50, 100, 150);
  gradient.addColorStop(0, '#003C50');
  gradient.addColorStop(1, '#53E6FF');
  ctx.strokeStyle(gradient);
  ctx.beginPath();
  ctx.arc(100, 100, 60, 0, Pi * 2);
  ctx.lineWidth := 10;
  ctx.stroke();

  bmp.Draw(Canvas, 0,0, true);
  bmp.Free;
end;

Try on JSFiddle

var my_canvas = document.getElementById('canvas'),
    ctx = my_canvas.getContext("2d");

ctx.fillStyle = "#E0E2E5";
ctx.fillRect(0, 0, 200, 200);

// Draw the outer rounded rectangle
var gradient = ctx.createLinearGradient(100, 20, 100, 180);
gradient.addColorStop(0, "white");
gradient.addColorStop(1, "#7C878A");
ctx.fillStyle = gradient;
ctx.beginPath();
ctx.roundRect(20, 20, 160, 160, 20);
ctx.save();
ctx.shadowBlur = 10;
ctx.shadowColor = "rgba(0,0,0, .6)";
ctx.shadowOffsetX = 0;
ctx.shadowOffsetY = 10;
ctx.fill();
ctx.restore();

// Draw the blue circle with gradient
gradient = ctx.createLinearGradient(100, 30, 100, 170);
gradient.addColorStop(0, "#CAEBF5");
gradient.addColorStop(1, "#0F5369");
ctx.strokeStyle = gradient;
ctx.beginPath();
ctx.arc(100, 100, 70, 0, Math.PI * 2);
ctx.lineWidth = 10;
ctx.stroke();

gradient = ctx.createLinearGradient(100, 50, 100, 150);
gradient.addColorStop(0, "#003C50");
gradient.addColorStop(1, "#53E6FF");
ctx.strokeStyle = gradient;
ctx.beginPath();
ctx.arc(100, 100, 60, 0, Math.PI * 2);
ctx.lineWidth = 10;
ctx.stroke();

Hierarchy

IInterface
IBGRAPath
TBGRACanvas2D

Overview

Fields

	`antialiasing: boolean;`
	`gradientGammaCorrection: boolean;`
	`linearBlend: boolean;`

Methods

	`constructor Create(ASurface: TBGRACustomBitmap);`
	`destructor Destroy; override;`
	`function createLinearGradient(x0,y0,x1,y1: single; Colors: TBGRACustomGradient): IBGRACanvasGradient2D; overload;`
	`function createLinearGradient(p0,p1: TPointF; Colors: TBGRACustomGradient): IBGRACanvasGradient2D; overload;`
	`function createLinearGradient(p0,p1: TPointF): IBGRACanvasGradient2D; overload;`
	`function createLinearGradient(x0,y0,x1,y1: single): IBGRACanvasGradient2D; overload;`
	`function createPattern(texture: IBGRAScanner): IBGRACanvasTextureProvider2D; overload;`
	`function createPattern(image: TBGRACustomBitmap; repetition: string): IBGRACanvasTextureProvider2D; overload;`
	`function createRadialGradient(p0: TPointF; r0: single; p1: TPointF; r1: single; Colors: TBGRACustomGradient; flipGradient: boolean=false): IBGRACanvasGradient2D; overload;`
	`function createRadialGradient(x0,y0,r0,x1,y1,r1: single; flipGradient: boolean=false): IBGRACanvasGradient2D; overload;`
	`function createRadialGradient(x0,y0,r0,x1,y1,r1: single; Colors: TBGRACustomGradient; flipGradient: boolean=false): IBGRACanvasGradient2D; overload;`
	`function createRadialGradient(p0: TPointF; r0: single; p1: TPointF; r1: single; flipGradient: boolean=false): IBGRACanvasGradient2D; overload;`
	`class function CSSFontNameToLCL(AName: string): string;`
	`class function FontNameListToStr(AList: ArrayOfString): string;`
	`function getLineStyle: TBGRAPenStyle;`
	`function getShadowColor: TBGRAPixel;`
	`function isPointInPath(pt: TPointF): boolean; overload;`
	`function isPointInPath(x,y: single): boolean; overload;`
	`function measureText(AText: string): TCanvas2dTextSize;`
	`class function StrToFontNameList(AText: string): ArrayOfString;`
	`function toDataURL(mimeType: string = 'image/png'): string;`
	`procedure addPath(ASvgPath: string); overload;`
	`procedure addPath(APath: IBGRAPath); overload;`
	`procedure arc(x, y, radius, startAngleRadCW, endAngleRadCW: single); overload;`
	`procedure arc(x, y, radius, startAngleRadCW, endAngleRadCW: single; anticlockwise: boolean); overload;`
	`procedure arc(cx, cy, rx,ry, xAngleRadCW, startAngleRadCW, endAngleRadCW: single; anticlockwise: boolean); overload;`
	`procedure arc(constref arcDef: TArcDef); overload;`
	`procedure arc(cx, cy, rx,ry, xAngleRadCW, startAngleRadCW, endAngleRadCW: single); overload;`
	`procedure arcTo(x1, y1, x2, y2, radius: single); overload;`
	`procedure arcTo(p1,p2: TPointF; radius: single); overload;`
	`procedure arcTo(rx, ry, xAngleRadCW: single; largeArc,anticlockwise: boolean; x, y: single);`
	`procedure beginPath;`
	`procedure bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y: single); overload;`
	`procedure bezierCurveTo(constref cp1,cp2,pt: TPointF); overload;`
	`procedure circle(x,y,r: single);`
	`procedure clearPath;`
	`procedure clearRect(x,y,w,h: single);`
	`procedure clip;`
	`procedure closedSpline(const pts: array of TPointF; style: TSplineStyle);`
	`procedure closePath;`
	`procedure copyStateFrom(AOtherCanvas2D: TBGRACanvas2D);`
	`procedure drawImage(image: TBGRACustomBitmap; dx,dy: single; AFilter: TResampleFilter = rfLinear); overload;`
	`procedure drawImage(image: TBGRACustomBitmap; dx,dy,dw,dh: single; AFilter: TResampleFilter = rfLinear); overload;`
	`procedure ellipse(x,y,rx,ry: single);`
	`procedure fill; overload;`
	`procedure fill(AFillProc: TBGRAPathFillProc; AData: pointer); overload;`
	`procedure fill(AFillProc: TBGRAPathFillProc; const AMatrix: TAffineMatrix; AData: pointer); overload;`
	`procedure fillOverStroke;`
	`procedure fillRect(x,y,w,h: single);`
	`procedure fillStyle(color: TBGRAPixel); overload;`
	`procedure fillStyle(provider: IBGRACanvasTextureProvider2D); overload;`
	`procedure fillStyle(color: string); overload;`
	`procedure fillStyle(texture: IBGRAScanner); overload;`
	`procedure fillStyle(color: TColor); overload;`
	`procedure fillText(AText: string; x,y: single);`
	`procedure lineStyle(const AValue: array of single); overload;`
	`procedure lineStyle(AStyle: TPenStyle); overload;`
	`procedure lineTo(constref pt: TPointF); overload;`
	`procedure lineTo(x,y: single); overload;`
	`procedure mask(image: TBGRACustomBitmap; dx,dy: single; AFilter: TResampleFilter = rfLinear); overload;`
	`procedure mask(image: TBGRACustomBitmap; dx,dy,dw,dh: single; AFilter: TResampleFilter = rfLinear); overload;`
	`procedure moveTo(x,y: single); overload;`
	`procedure moveTo(constref pt: TPointF); overload;`
	`procedure openedSpline(const pts: array of TPointF; style: TSplineStyle);`
	`procedure path(APath: IBGRAPath); overload;`
	`procedure path(ASvgPath: string); overload;`
	`procedure polylineTo(const pts: array of TPointF);`
	`procedure quadraticCurveTo(cpx,cpy,x,y: single); overload;`
	`procedure quadraticCurveTo(constref cp,pt: TPointF); overload;`
	`procedure rect(x,y,w,h: single);`
	`procedure resetTransform;`
	`procedure restore;`
	`procedure rotate(angleRadCW: single);`
	`procedure roundRect(x,y,w,h,radius: single); overload;`
	`procedure roundRect(x,y,w,h,rx,ry: single); overload;`
	`procedure save;`
	`procedure scale(x,y: single); overload;`
	`procedure scale(factor: single); overload;`
	`procedure setTransform(m11,m21, m12,m22, m13,m23: single);`
	`procedure shadowColor(color: TBGRAPixel); overload;`
	`procedure shadowColor(color: string); overload;`
	`procedure shadowColor(color: TColor); overload;`
	`procedure shadowNone;`
	`procedure skewx(angleRadCW: single);`
	`procedure skewy(angleRadCW: single);`
	`procedure spline(const pts: array of TPointF; style: TSplineStyle= ssOutside);`
	`procedure splineTo(const pts: array of TPointF; style: TSplineStyle= ssOutside);`
	`procedure stroke(ADrawProc: TBGRAPathDrawProc; AData: pointer); overload;`
	`procedure stroke(ADrawProc: TBGRAPathDrawProc; const AMatrix: TAffineMatrix; AData: pointer); overload;`
	`procedure stroke; overload;`
	`procedure strokeOverFill;`
	`procedure strokeRect(x,y,w,h: single);`
	`procedure strokeResetTransform;`
	`procedure strokeScale(x,y: single);`
	`procedure strokeSkewx(angleRadCW: single);`
	`procedure strokeSkewy(angleRadCW: single);`
	`procedure strokeStyle(color: TBGRAPixel); overload;`
	`procedure strokeStyle(provider: IBGRACanvasTextureProvider2D); overload;`
	`procedure strokeStyle(color: TColor); overload;`
	`procedure strokeStyle(texture: IBGRAScanner); overload;`
	`procedure strokeStyle(color: string); overload;`
	`procedure strokeText(AText: string; x,y: single);`
	`procedure text(AText: string; x,y: single);`
	`procedure toSpline(closed: boolean; style: TSplineStyle= ssOutside);`
	`procedure transform(AMatrix: TAffineMatrix); overload;`
	`procedure transform(m11,m21, m12,m22, m13,m23: single); overload;`
	`procedure translate(x,y: single);`
	`procedure unclip;`

Properties

	`property currentPath: ArrayOfTPointF read GetCurrentPathAsPoints;`
	`property direction: TFontBidiMode read GetTextDirection write SetTextDirection;`
	`property fillMode: TFillMode read GetFillMode write SetFillMode;`
	`property font: string read GetFontString write SetFontString;`
	`property fontEmHeight: single read GetFontEmHeight write SetFontEmHeight;`
	`property fontName: string read GetFontName write SetFontName;`
	`property fontRenderer: TBGRACustomFontRenderer read GetFontRenderer write SetFontRenderer;`
	`property fontStyle: TFontStyles read GetFontStyle write SetFontStyle;`
	`property globalAlpha: single read GetGlobalAlpha write SetGlobalAlpha;`
	`property hasShadow: boolean read GetHasShadow;`
	`property height: Integer read GetHeight;`
	`property lineCap: string read GetLineCap write SetLineCap;`
	`property lineCapLCL: TPenEndCap read GetLineCapLCL write SetLineCapLCL;`
	`property lineJoin: string read GetlineJoin write SetLineJoin;`
	`property lineJoinLCL: TPenJoinStyle read GetlineJoinLCL write SetLineJoinLCL;`
	`property lineWidth: single read GetLineWidth write SetLineWidth;`
	`property matrix: TAffineMatrix read GetMatrix write SetMatrix;`
	`property miterLimit: single read GetMiterLimit write SetMiterLimit;`
	`property pixelCenteredCoordinates: boolean read GetPixelCenteredCoordinates write SetPixelCenteredCoordinates;`
	`property shadowBlur: single read GetShadowBlur write SetShadowBlur;`
	`property shadowFastest: boolean read GetShadowFastest write SetShadowFastest;`
	`property shadowOffset: TPointF read GetShadowOffset write SetShadowOffset;`
	`property shadowOffsetX: single read GetShadowOffsetX write SetShadowOffsetX;`
	`property shadowOffsetY: single read GetShadowOffsetY write SetShadowOffsetY;`
	`property strokeMatrix: TAffineMatrix read GetStrokeMatrix write SetStrokeMatrix;`
	`property surface: TBGRACustomBitmap read FSurface;`
	`property textAlign: string read GetTextAlign write SetTextAlign;`
	`property textAlignLCL: TAlignment read GetTextAlignLCL write SetTextAlignLCL;`
	`property textBaseline: string read GetTextBaseline write SetTextBaseline;`
	`property width: Integer read GetWidth;`

Description

Fields

	`antialiasing: boolean;`
Whether to apply `antialiasing` when drawing

gradientGammaCorrection: boolean;

Whether to use gamma correction in gradient interpolation.

It is less accurate but it reflects more how HTML Canvas works.

linearBlend: boolean;

Whether to use linear blending when merging colors.

In this case, gamma correction won't be applied. It is less accurate but it reflects more how HTML Canvas works.

Methods

	`constructor Create(ASurface: TBGRACustomBitmap);`
`Create` an new instance with its own context.

	`destructor Destroy; override;`
Destroys the canvas context including the font renderer.

	`function createLinearGradient(x0,y0,x1,y1: single; Colors: TBGRACustomGradient): IBGRACanvasGradient2D; overload;`
Creates a linear gradient with custom color stops.

	`function createLinearGradient(p0,p1: TPointF; Colors: TBGRACustomGradient): IBGRACanvasGradient2D; overload;`
Creates a linear gradient with custom color stops using TPointF.

	`function createLinearGradient(p0,p1: TPointF): IBGRACanvasGradient2D; overload;`
Creates a linear gradient between two points using TPointF.

	`function createLinearGradient(x0,y0,x1,y1: single): IBGRACanvasGradient2D; overload;`
Creates a linear gradient between two points.

	`function createPattern(texture: IBGRAScanner): IBGRACanvasTextureProvider2D; overload;`
Creates a pattern using a scanner interface.

function createPattern(image: TBGRACustomBitmap; repetition: string): IBGRACanvasTextureProvider2D; overload;

Creates a pattern using an image.

repetition can be:

repeat-x: repetition along X axis
repeat-y: repetition along Y axis
no-repeat: image is drawn only once

	`function createRadialGradient(p0: TPointF; r0: single; p1: TPointF; r1: single; Colors: TBGRACustomGradient; flipGradient: boolean=false): IBGRACanvasGradient2D; overload;`
Creates a radial gradient with custom color stops using TPointF.

	`function createRadialGradient(x0,y0,r0,x1,y1,r1: single; flipGradient: boolean=false): IBGRACanvasGradient2D; overload;`
Creates a radial gradient between two circles.

	`function createRadialGradient(x0,y0,r0,x1,y1,r1: single; Colors: TBGRACustomGradient; flipGradient: boolean=false): IBGRACanvasGradient2D; overload;`
Creates a radial gradient with custom color stops.

	`function createRadialGradient(p0: TPointF; r0: single; p1: TPointF; r1: single; flipGradient: boolean=false): IBGRACanvasGradient2D; overload;`
Creates a radial gradient between two circles using TPointF.

	`class function CSSFontNameToLCL(AName: string): string;`
Converts CSS font name to LCL font name.

	`class function FontNameListToStr(AList: ArrayOfString): string;`
Converts a list of font names to a string.

	`function getLineStyle: TBGRAPenStyle;`
Gets the current line style.

	`function getShadowColor: TBGRAPixel;`
Retrieves the current color used for shadows.

	`function isPointInPath(pt: TPointF): boolean; overload;`
Checks if a given TPointF is inside the current path.

	`function isPointInPath(x,y: single): boolean; overload;`
Checks if a given point is inside the current path.

	`function measureText(AText: string): TCanvas2dTextSize;`
Measures the size of the given text.

	`class function StrToFontNameList(AText: string): ArrayOfString;`
Converts a string of font names to a list.

	`function toDataURL(mimeType: string = 'image/png'): string;`
Converts the image to code that can be put in an image href

	`procedure addPath(ASvgPath: string); overload;`
Adds an SVG path to the current drawing.

	`procedure addPath(APath: IBGRAPath); overload;`
Adds a path to the current drawing.

	`procedure arc(x, y, radius, startAngleRadCW, endAngleRadCW: single); overload;`
Adds an arc around the specified point in the clockwise direction.

	`procedure arc(x, y, radius, startAngleRadCW, endAngleRadCW: single; anticlockwise: boolean); overload;`
Adds an arc around the specified point.

	`procedure arc(cx, cy, rx,ry, xAngleRadCW, startAngleRadCW, endAngleRadCW: single; anticlockwise: boolean); overload;`
Adds an elliptical arc around the specified point.

	`procedure arc(constref arcDef: TArcDef); overload;`
Adds an elliptical `arc` using TArcDef.

	`procedure arc(cx, cy, rx,ry, xAngleRadCW, startAngleRadCW, endAngleRadCW: single); overload;`
Adds an elliptical arc around the specified point in the clockwise direction.

	`procedure arcTo(x1, y1, x2, y2, radius: single); overload;`
Adds an arc from current position.

	`procedure arcTo(p1,p2: TPointF; radius: single); overload;`
Adds an arc from current position using TPointF.

	`procedure arcTo(rx, ry, xAngleRadCW: single; largeArc,anticlockwise: boolean; x, y: single);`
Adds an elliptic arc of the given angle from current position.

	`procedure beginPath;`
Begins a new path or resets the current path.

	`procedure bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y: single); overload;`
Adds a cubic Bézier curve to a specified point.

	`procedure bezierCurveTo(constref cp1,cp2,pt: TPointF); overload;`
Adds a cubic Bézier curve to a specified point using TPointF.

	`procedure circle(x,y,r: single);`
Adds a full `circle`.

	`procedure clearPath;`
Clears the area represented by the current path, making the canvas transparent

	`procedure clearRect(x,y,w,h: single);`
Directly clears a rectangle, making it fully transparent.

	`procedure clip;`
Clips the drawing region to the current path.

	`procedure closedSpline(const pts: array of TPointF; style: TSplineStyle);`
Adds an closed spline to the current path

	`procedure closePath;`
Closes the current path.

	`procedure copyStateFrom(AOtherCanvas2D: TBGRACanvas2D);`
Save the current state and copy the canvas state from another canvas.

	`procedure drawImage(image: TBGRACustomBitmap; dx,dy: single; AFilter: TResampleFilter = rfLinear); overload;`
Draws an image at the specified location.

	`procedure drawImage(image: TBGRACustomBitmap; dx,dy,dw,dh: single; AFilter: TResampleFilter = rfLinear); overload;`
Draws an image with scaling.

	`procedure ellipse(x,y,rx,ry: single);`
Adds a full `ellipse`.

	`procedure fill; overload;`
Fills the current path with the current `fill` style.

	`procedure fill(AFillProc: TBGRAPathFillProc; AData: pointer); overload;`
Fills the current path using the specified function.

	`procedure fill(AFillProc: TBGRAPathFillProc; const AMatrix: TAffineMatrix; AData: pointer); overload;`
Fills the current path using the specified function and transformation matrix.

	`procedure fillOverStroke;`
Fill and stroke at the same time, with filling being on top

	`procedure fillRect(x,y,w,h: single);`
Directly fills a rectangle with the current fill style.

	`procedure fillStyle(color: TBGRAPixel); overload;`
Sets the fill style to a solid color specified as TBGRAPixel

	`procedure fillStyle(provider: IBGRACanvasTextureProvider2D); overload;`
Sets the fill style to a texture using a texture provider.

	`procedure fillStyle(color: string); overload;`
Sets the fill style to a solid color specified as CSS string

procedure fillStyle(texture: IBGRAScanner); overload;

Sets the fill style to a texture defined by IBGRAScanner interface.

The texture can be a TBGRABitmap object or any custom scanner.

	`procedure fillStyle(color: TColor); overload;`
Sets the fill style to a solid color specified as TColor

	`procedure fillText(AText: string; x,y: single);`
Fills directly the specified text using current fill style.

	`procedure lineStyle(const AValue: array of single); overload;`
Sets the style for lines.

	`procedure lineStyle(AStyle: TPenStyle); overload;`
Sets the style for lines using a predefined style.

	`procedure lineTo(constref pt: TPointF); overload;`
Connects a line to a specified point using TPointF.

	`procedure lineTo(x,y: single); overload;`
Connects with a line to a specified point.

	`procedure mask(image: TBGRACustomBitmap; dx,dy: single; AFilter: TResampleFilter = rfLinear); overload;`
Applies the specified mask at the specified location for future drawings.

	`procedure mask(image: TBGRACustomBitmap; dx,dy,dw,dh: single; AFilter: TResampleFilter = rfLinear); overload;`
Applies the specified `mask` with scaling for future drawings.

	`procedure moveTo(x,y: single); overload;`
Moves the pen to a new location.

	`procedure moveTo(constref pt: TPointF); overload;`
Moves the pen to a new location using TPointF.

	`procedure openedSpline(const pts: array of TPointF; style: TSplineStyle);`
Adds an opened spline to the current path

	`procedure path(APath: IBGRAPath); overload;`
Replaces the current defined path.

	`procedure path(ASvgPath: string); overload;`
Replaces the current defined `path` defined as SVG `path`.

	`procedure polylineTo(const pts: array of TPointF);`
Add multiple connected lines.

	`procedure quadraticCurveTo(cpx,cpy,x,y: single); overload;`
Adds a quadratic Bézier curve to a specified point.

	`procedure quadraticCurveTo(constref cp,pt: TPointF); overload;`
Adds a quadratic Bézier curve to a specified point using TPointF.

	`procedure rect(x,y,w,h: single);`
Adds a rectangle specified by its top-left corner, width and height

	`procedure resetTransform;`
Resets the current transformation matrix to the identity matrix.

procedure restore;

Restores the most recently saved canvas state by popping the top entry in the drawing state stack.

If there is no saved state, this method does nothing.

procedure rotate(angleRadCW: single);

Rotates the canvas around the origin (0,0) by the given angle in radians, clockwise.

Example rotating around the center of a 200x200 canvas:

canvas2D.translate(100, 100);
canvas2D.rotate(Pi);
canvas2D.translate(-100, -100);

	`procedure roundRect(x,y,w,h,radius: single); overload;`
Adds a rounded rectangle.

	`procedure roundRect(x,y,w,h,rx,ry: single); overload;`
Adds a rounded rectangle with different x and y radii.

procedure save;

Saves the entire state of the canvas by pushing the current state onto a stack.

The drawing state consists of:

the current transformation matrix.
the current clipping region.
the font parameters.
the various properties of stroke and fill style.
the shadow parameters.

	`procedure scale(x,y: single); overload;`
Apply scaling to the canvas with independent x and y scales.

	`procedure scale(factor: single); overload;`
Apply uniform scaling to the canvas.

	`procedure setTransform(m11,m21, m12,m22, m13,m23: single);`
Resets the current transform to the identity matrix, then applies the new transformation.

	`procedure shadowColor(color: TBGRAPixel); overload;`
Sets the color of the shadow specified as TBGRAPixel

	`procedure shadowColor(color: string); overload;`
Sets the color of the shadow specified as CSS string

	`procedure shadowColor(color: TColor); overload;`
Sets the color of the shadow specified as TColor

	`procedure shadowNone;`
Removes any shadow effect from future drawings.

	`procedure skewx(angleRadCW: single);`
Skews the drawing on the canvas along the X axis by the given angle in radians.

	`procedure skewy(angleRadCW: single);`
Skews the drawing on the canvas along the Y axis by the given angle in radians.

procedure spline(const pts: array of TPointF; style: TSplineStyle= ssOutside);

Adds a spline to the current path.

It will be closed if the last point is equal to the first one.

	`procedure splineTo(const pts: array of TPointF; style: TSplineStyle= ssOutside);`
Continues from current position with an opened spline.

	`procedure stroke(ADrawProc: TBGRAPathDrawProc; AData: pointer); overload;`
Strokes the current path using the specified function.

	`procedure stroke(ADrawProc: TBGRAPathDrawProc; const AMatrix: TAffineMatrix; AData: pointer); overload;`
Strokes the current path using the specified function and transformation matrix.

	`procedure stroke; overload;`
Strokes the current path with the current `stroke` style.

	`procedure strokeOverFill;`
Fill and stroke at the same time, with stroke being on top

	`procedure strokeRect(x,y,w,h: single);`
Directly strokes a rectangle with the current stroke style.

	`procedure strokeResetTransform;`
Resets the stroke transformation matrix to the identity matrix, removing any stroke transformations.

	`procedure strokeScale(x,y: single);`
Apply scaling to the stroke. Can specify x and y scales independently.

	`procedure strokeSkewx(angleRadCW: single);`
Skews the stroke on the canvas along the X axis by the given angle in radians.

	`procedure strokeSkewy(angleRadCW: single);`
Skews the stroke on the canvas along the Y axis by the given angle in radians.

	`procedure strokeStyle(color: TBGRAPixel); overload;`
Sets the stroke to a solid color specified as TBGRAPixel

	`procedure strokeStyle(provider: IBGRACanvasTextureProvider2D); overload;`
Sets the stroke to a texture using a texture provider.

	`procedure strokeStyle(color: TColor); overload;`
Sets the stroke to a solid color specified as TColor

procedure strokeStyle(texture: IBGRAScanner); overload;

Sets the stroke to a texture defined by IBGRAScanner interface.

The texture can be a TBGRABitmap object or any custom scanner.

	`procedure strokeStyle(color: string); overload;`
Sets the stroke to a solid color specified as CSS string

	`procedure strokeText(AText: string; x,y: single);`
Draws directly the outline of the specified text using current stroke style.

	`procedure text(AText: string; x,y: single);`
Adds the path of a `text`.

	`procedure toSpline(closed: boolean; style: TSplineStyle= ssOutside);`
Converts the current polyline path to a spline.

	`procedure transform(AMatrix: TAffineMatrix); overload;`
Applies a pre-built transformation matrix to the canvas.

	`procedure transform(m11,m21, m12,m22, m13,m23: single); overload;`
Applies a transformation matrix to the canvas.

	`procedure translate(x,y: single);`
Translates the canvas origin to a new location.

	`procedure unclip;`
Reintroduce the current path in the drawing region.

Properties

	`property currentPath: ArrayOfTPointF read GetCurrentPathAsPoints;`
The current path as an array of points.

	`property direction: TFontBidiMode read GetTextDirection write SetTextDirection;`
The `direction` of the text (left-to-right, right-to-left).

	`property fillMode: TFillMode read GetFillMode write SetFillMode;`
The rule to use for filling shapes (non-zero winding, even-odd alternate).

	`property font: string read GetFontString write SetFontString;`
Combined `font` properties in CSS-like string format.

	`property fontEmHeight: single read GetFontEmHeight write SetFontEmHeight;`
The size of the font's em square in pixels.

	`property fontName: string read GetFontName write SetFontName;`
The name of the font for text drawing.

	`property fontRenderer: TBGRACustomFontRenderer read GetFontRenderer write SetFontRenderer;`
The renderer used for custom font drawing.

	`property fontStyle: TFontStyles read GetFontStyle write SetFontStyle;`
The style of the font using LCL enumeration set.

	`property globalAlpha: single read GetGlobalAlpha write SetGlobalAlpha;`
The global alpha (transparency) applied to drawings.

property hasShadow: boolean read GetHasShadow;

Indicates if any shadow is set.

A shadow is visible if the shadow color is set and the offset or the radius is set.

	`property height: Integer read GetHeight;`
The `height` of the underlying bitmap.

	`property lineCap: string read GetLineCap write SetLineCap;`
The shape used at the end of lines (`butt`, `round`, `square`).

	`property lineCapLCL: TPenEndCap read GetLineCapLCL write SetLineCapLCL;`
Line cap style using LCL enumeration.

	`property lineJoin: string read GetlineJoin write SetLineJoin;`
The type of corner created when two lines meet (`miter`, `round`, `bevel`).

	`property lineJoinLCL: TPenJoinStyle read GetlineJoinLCL write SetLineJoinLCL;`
Line join style using LCL enumeration.

	`property lineWidth: single read GetLineWidth write SetLineWidth;`
The width of lines drawn on the canvas.

	`property matrix: TAffineMatrix read GetMatrix write SetMatrix;`
The transformation `matrix` applied to the path.

	`property miterLimit: single read GetMiterLimit write SetMiterLimit;`
The maximum miter length when connecting lines.

	`property pixelCenteredCoordinates: boolean read GetPixelCenteredCoordinates write SetPixelCenteredCoordinates;`
Determines if coordinates are centered on pixels (false by default).

	`property shadowBlur: single read GetShadowBlur write SetShadowBlur;`
The blur level of the shadow.

	`property shadowFastest: boolean read GetShadowFastest write SetShadowFastest;`
If true, uses a faster but less accurate shadow algorithm.

	`property shadowOffset: TPointF read GetShadowOffset write SetShadowOffset;`
The offset of the shadow as a TPointF.

	`property shadowOffsetX: single read GetShadowOffsetX write SetShadowOffsetX;`
The horizontal offset of the shadow from the shape.

	`property shadowOffsetY: single read GetShadowOffsetY write SetShadowOffsetY;`
The vertical offset of the shadow from the shape.

	`property strokeMatrix: TAffineMatrix read GetStrokeMatrix write SetStrokeMatrix;`
The transformation matrix applied to pen.

	`property surface: TBGRACustomBitmap read FSurface;`
The underlying bitmap where the canvas draws.

	`property textAlign: string read GetTextAlign write SetTextAlign;`
Horizontal alignment of text (`left`, `right`, `center`, `start`, `end`).

	`property textAlignLCL: TAlignment read GetTextAlignLCL write SetTextAlignLCL;`
Horizontal alignment of text using LCL enumeration.

	`property textBaseline: string read GetTextBaseline write SetTextBaseline;`
Vertical alignment of text (`top`, `middle`, `alphabetic`, `bottom`).

	`property width: Integer read GetWidth;`
The `width` of the underlying bitmap.

Getting started

Class TBGRACanvas2D

Unit

Declaration

Description

Hierarchy

Overview

Fields

Methods

Properties

Description

Fields

Methods

Properties