HTML Canvas - Colors and Styles

We can also style the drawn graphics onto Canvas using its API methods and properties so that attractive visual content can be generated and used. Canvas provides a wide variety of options to style the graphics rendered on the Canvas element.

The interface CanvasRenderringContext2D contains most of the methods and properties to create attractive graphics on the Canvas element. The other interfaces containing graphic styling methods and properties are also used by the context object when needed.

Properties

Following is the list of properties available to apply different Colors and Styles to HTML5 elements.

S.No Property & Description
1 filter

This property provides filter effects such as grayscale, opacity, and blurring. It accepts all the values accepted by CSS filter style.
2 globalAlpha

This property specifies the transparency to be applied to the current graphic of the Context object.
3 globalCompositeOperation

This property applies the compositing operations to the Canvas element object.

Methods

The methods available to create graphics as well as to color and style them inside the Canvas element are given in the below table.

S.No Method & Description
1 addcolorStop()

This method adds a new color stop given to the canvas gradient inside the canvas element.
2 createConicGradient()

The method createConicGradient() of Canvas API creates a gradient around a point with given co-ordinates.
3 createLinearGradient()

The method createLinearGradient() of Canvas API creates a gradient along the line connecting given co-ordinates.
4 createPattern()

This method creates a pattern by repetition of the input image in the given area.
5 createRadialGradient()

The method createRadialGradient() of Canvas API creates a radial gradient by using size and given co-ordinates of two circles.
Advertisements