HTML5 Canvas-Create Gradients - HTML 5

How to create gradients in HTML5?

HTML5 canvas allows the user to fill and stroke shapes using linear and radial gradients using below methods

Sr.No.

Method and Description

1

addColorStop(offset, color)

addColorStop(offset, color) method is used to add a color stop with the given color to the gradient at a given offset. Here 0.0 is the offset at one end of the gradient and 1.0 is the offset at the other end.

2

createLinearGradient(x0, y0, x1, y1)

createLinearGradient(x0, y0, x1, y1) method is used to returns a CanvasGradient object which represents a linear gradient that paints along the line given by the coordinates represented by the arguments. Four arguments represent the starting point (x1,y1) and end point (x2,y2) of the gradient.

3

createRadialGradient(x0, y0, r0, x1, y1, r1)

createRadialGradient(x0, y0, r0, x1, y1, r1) method is used to return a CanvasGradient object which represents a radial gradient that paints along the cone given by the circles represented by the arguments. First 3 arguments define a circle with coordinates (x1,y1) and radius r1 and the second defines a circle with coordinates (x2,y2) and radius r2.

Linear Gradient Example

Below is a simple example which is used to create Linear gradient.

Output

linear gradient

Radial Gradient Example

Below is a simple example which is used to create Radial gradient.

Output

radial gradient

All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd DMCA.com Protection Status

HTML 5 Topics