Search within TutorialsPark

HTML5 Canvas Drawing State

Some Basic Properties used in drawing operations.

Basic Properties used in drawing Operations.

Property Description Default Value
fillStyle Defines the fill color or gradient "black"
strokeStyle Defines the color or gradients of the stroke lines"black"
lineJoin Defines the style of corner,where two lines meet. "miter"
lineWidth Defines the width of the current line in px. "1.0 px"

Coloring the fills and Strokes:fillStyle and strokeStyle

fillStyle: Property defines the color, pattern and gradient of the color fill.Default value is "black"

strokeStyle:Property defines the color, pattern and gradient of the stroke.Default value is "black"

Example:fillStyle and strokeStyle property.

Give it a TRY! » NOTE-If do not specify the fillStyle property, the fill color is black by default.

Styling the corners : lineJoin.

1.At the Intersection of two line which can be ends of rectangles or two straight lines.The corners can be styled using the canvas property of lineJoin

lineJoin: It defines the style of corners at the point of intersection or meet.The possible values are miter, round, bevel.The default value is miter

Eg:context.lineJoin = 'miter/round/bevel';

Example:Line Join with miter, round, bevel ends.

Give it a TRY! »

Related Examples

Related Tags