FillStyle Property
Class THtml5Canvas2D
The FillStyle property sets or returns the color, gradient, or pattern used to fill the drawing.
Property Values
A color value that indicates the fill color of the drawing. Defaul value: #000000 .
A gradient object used to fill the drawing.
A pattern object to use to fill the drawing.
Examples:
Define a red fill-color for the rectangle:
Canvas.FillStyle := #FF0000;
Canvas.FillRect(20,15,150,100);
Define a gradient (top to bottom) as the fill style for the rectangle:
var
Gradient: TCanvasLinearGradient;
Gradient := Canvas.CreateLinearGradient(0,0,0,100);
Gradient.AddColorStop(0,clBlack);
Gradient.AddColorStop(1,clWhite);
Canvas.FillStyle := Gradient;
Canvas.FillRect(20,15,150,100);
Define a gradient that goes from black, to red, to white, as the fill style for the rectangle:
var
Gradient: TCanvasLinearGradient;
Gradient := Canvas.CreateLinearGradient(0,0,150,0);
Gradient.AddColorStop(0,clBlack);
Gradient.AddColorStop(0.5,clRed);
Gradient.AddColorStop(1,clWhite);
Canvas.FillStyle := Gradient;
Canvas.FillRect(20,15,150,100);
Image pattern:
Image to Use:
Use an image to fill the drawing pattern:
Add this code to your image update or image load event:
Canvas.Rect(250, 30, 150, 100);
Canvas.FillStyle := Canvas.CreatePattern(ImgLamp.DomHandle, cpaRepeat);
Canvas.Fill;