Drawing State

In this chapter you will learn:

  1. How to use drawing state

What is drawing state

Drawing operations are configured by the drawing state. The following code uses the lineWidth property.

The following table shows the basic drawing state properties.

NameDescriptionDefault
fillStylethe style used for filled shapesblack
lineJointhe style used when lines meet in a shapemiter
lineWidththe width of lines1.0
strokeStyleGets or sets the style used for linesblack

Next chapter...

What you will learn in the next chapter:

  1. How to save and restore a drawing state
  2. Demo for saving and restoring drawing state
Home » Javascript Tutorial » Canvas
Canvas tag
Canvas Context
Rectangle
Rectangle clear
Drawing State
Drawing state restore
Line width
Line Join Style
Line cap settings
Gradients
Linear Gradient
Radial Gradient
Path
Arcs
Two types of curve
Quadratic Bezier Curves
Cubic Bezier Curves
Clip
Text
Shadow
Transparency
Stoke style