HTML5 Canvas

6.

Styling and Visual Properties

6.1.

Color Application

6.1.1.

fillStyle Property

6.1.2.

strokeStyle Property

6.1.3.

Color Inheritance and Defaults

6.2.

Color Format Support

6.2.1.

Named Color Keywords

6.2.2.

Hexadecimal Color Notation

6.2.3.

RGB Color Values

6.2.4.

RGBA Color Values with Alpha

6.2.5.

HSL Color Values

6.2.6.

HSLA Color Values with Alpha

6.3.

Line Styling Properties

6.3.1.

lineWidth Property

6.3.2.

Line Cap Styles

6.3.2.1.

6.3.2.2.

round Cap Style

6.3.2.3.

square Cap Style

6.3.3.

Line Join Styles

6.3.3.1.

round Join Style

6.3.3.2.

bevel Join Style

6.3.3.3.

miter Join Style

6.3.4.

miterLimit Property

6.3.5.

Dashed Line Patterns

6.3.5.1.

setLineDash Method

6.3.5.2.

getLineDash Method

6.3.5.3.

lineDashOffset Property

6.4.

Gradient Creation and Application

6.4.1.

Linear Gradients

6.4.1.1.

createLinearGradient Method

6.4.1.2.

Gradient Direction Definition

6.4.1.3.

Start and End Point Coordinates

6.4.2.

Radial Gradients

6.4.2.1.

createRadialGradient Method

6.4.2.2.

Inner and Outer Circle Definition

6.4.2.3.

Gradient Spread Control

6.4.3.

Color Stop Management

6.4.3.1.

addColorStop Method

6.4.3.2.

Color Stop Positioning

6.4.3.3.

Multiple Color Stops

6.5.

Pattern Creation and Application

6.5.1.

createPattern Method

6.5.2.

Pattern Source Types

6.5.2.1.

Image Element Patterns

6.5.2.2.

Canvas Element Patterns

6.5.2.3.

Video Element Patterns

6.5.3.

Pattern Repetition Options

6.5.3.1.

6.5.3.2.

repeat-x Option

6.5.3.3.

repeat-y Option

6.5.3.4.

no-repeat Option

6.6.

6.6.1.

shadowOffsetX Property

6.6.2.

shadowOffsetY Property

6.6.3.

shadowBlur Property

6.6.4.

shadowColor Property

6.6.5.

Shadow Performance Considerations

Previous

5. Basic Shape Drawing

Go to top

Next

7. Text Rendering