fillStyle
|
<color> | CanvasGradient | CanvasPattern
|
-
|
Style to fill an area.
- When the type is <color>, this parameter indicates the color of the filling area.
- When the type is CanvasGradient, this parameter indicates a gradient object, which is created using the createLinearGradient method.
- When the type is CanvasPattern, use the createPattern method to create a pattern.
|
lineWidth
|
number
|
-
|
Line width.
|
strokeStyle
|
<color> | CanvasGradient | CanvasPattern
|
-
|
Stroke style.
- When the type is <color>, this parameter indicates the stroke color.
- When the type is CanvasGradient, this parameter indicates a gradient object, which is created using the createLinearGradient method.
- When the type is CanvasPattern, use the createPattern method to create a pattern.
|
lineCap
|
string
|
'butt'
|
Style of the specified line endpoint. The options are as follows:
- 'butt': The endpoints of the line are squared off.
- 'round': The endpoints of the line are rounded.
- 'square': The endpoints of the line are squared off, and each endpoint has added a rectangle whose length is the same as the line thickness and whose width is half of the line thickness.
|
lineJoin
|
string
|
'miter'
|
Style of the intersection point between line segments. The options are as follows:
- 'round': The intersection is a sector, whose radius at the rounded corner is equal to the line width.
- 'bevel': The intersection is a triangle. The rectangular corner of each line is independent.
- 'miter': The intersection has a miter corner by extending the outside edges of the lines until they meet. You can view the effect of this attribute in miterLimit.
|
miterLimit
|
number
|
10
|
Maximum miter length. The miter length is the distance between the inner corner and the outer corner where two lines meet.
|
font
|
string
|
'normal normal 14px sans-serif'
|
Font style.
Syntax: ctx.font='font-size font-family'
- (Optional) font-size: font size and row height. The unit can only be pixels.
- (Optional) font-family: font family.
Syntax: ctx.font='font-style font-weight font-size font-family'
- (Optional) font-style: specifies the font style. Available values are 'normal' and 'italic'.
- (Optional) font-weight: font weight. Available values are as follows: 'normal', 'bold', 'bolder', 'lighter', 100, 200, 300, 400, 500, 600, 700, 800, 900
- (Optional) font-size: font size and row height. The unit can only be pixels.
- (Optional) font-family: font family. Available values are 'sans-serif', 'serif', and 'monospace'.
|
textAlign
|
string
|
'left'
|
Text alignment mode. Available values are as follows:
- 'left': The text is left-aligned.
- 'right': The text is right-aligned.
- 'center': The text is center-aligned.
- 'start': The text is aligned with the start bound.
- 'end': The text is aligned with the end bound.
NOTE: In the ltr layout mode, the value start equals left. In the rtl layout mode, the value start equals right.
|
textBaseline
|
string
|
'alphabetic'
|
Horizontal alignment mode of text. Available values are as follows:
- 'alphabetic': The text baseline is the normal alphabetic baseline.
- 'top': The text baseline is on the top of the text bounding box.
- 'hanging': The text baseline is a hanging baseline over the text.
- 'middle': The text baseline is in the middle of the text bounding box.
- 'ideographic': The text baseline is the ideographic baseline. If a character exceeds the alphabetic baseline, the ideographic baseline is located at the bottom of the excess character.
- 'bottom': The text baseline is at the bottom of the text bounding box. Its difference from the ideographic baseline is that the ideographic baseline does not consider letters in the next line.
|
globalAlpha
|
number
|
-
|
Opacity. 0.0: completely transparent; 1.0: completely opaque.
|
lineDashOffset
|
number
|
0.0
|
Offset of the dashed line. The precision is float.
|
globalCompositeOperation
|
string
|
'source-over'
|
Composition operation type. Available values are as follows: 'source-over', 'source-atop', 'source-in', 'source-out', 'destination-over', 'destination-atop', 'destination-in', 'destination-out', 'lighter', 'copy', and 'xor'.
|
shadowBlur
|
number
|
0.0
|
Blur level during shadow drawing. A larger value indicates a more blurred effect. The precision is float.
|
shadowColor
|
<color>
|
-
|
Shadow color.
|
shadowOffsetX
|
number
|
-
|
X-axis shadow offset relative to the original object.
|
shadowOffsetY
|
number
|
-
|
Y-axis shadow offset relative to the original object.
|
imageSmoothingEnabled
|
boolean
|
true
|
Whether to adjust the image smoothness during image drawing. The value true means to enable this feature, and false means the opposite.
|
imageSmoothingQuality
|
string
|
'low'
|
Image smoothness. The value can be 'low', 'medium', or 'high'.
|