canvas-gradient
Gradient with canvas.
Installation
npm install canvas-gradient --save
Usage
var cnvsGrad = ; // For linear gradient.; // For radial gradient.;
API
Setup:
-
ctx -> canvas 2D context.
-
fx -> Fill start-x. [Optional param, defaults to 0]
-
fy -> Fill start-y. [Optional param, defaults to 0]
-
fw -> Fill width. [Optional param, defaults to canvas.width]
-
fh -> Fill height. [Optional param, defaults to canvas.height]
For linear:
-
gx1 -> Gradiant start-x.
-
gy1 -> Gradiant start-y.
-
gx2 -> Gradiant end-x.
-
gy2 -> Gradiant end-y.
-
colorStops -> [{color,position}...]
For radail:
-
x0 -> x-axis for start circle.
-
y0 -> y-axis for end circle.
-
r0 -> Radius of the start circle.
-
x1 -> x-axis of the end circle.
-
y1 -> y-axis of the end circle.
-
r1 -> Radius of the end circle.
Checkout the live demo.
var cnvsGrad = ; //canvas setupvar canvas = document;canvaswidth = '500';canvasheight = '300';canvasstyleoutline = "1px solid black";documentbody; // Get the context.var ctx = canvas; // Set up color stop pointsvar cs = color:"black" position:0 color:"grey"position:05 color:"white"position:1; // Draw gradient.; // Similarly for radial ;