addColorStop - method of the CanvasCtx object

Description:

Sets the color and position in the gradient object

Syntax:

Object addColorStop(Long stop, String color)

Parameters:

stop	(Long) Value (range 0.0 - 1.0) represents the position between start and end of the gradient
color	(String) A CSS specification color value valid for the stop position

Note:

This method is also functional in Web panels.

Example:

The ctx variable represents the drawing canvas (CanvasCtx). The setup is done on the "Draw" tab at the beginning of the script of drawing event onDraw as follows:

var ctx = pEvent.GetCtx(1);

JavaScriptSelect and copy to clipboard



var grd = ctx.createLinearGradient(20, 20, 60, 40);

ctx.addColorStop(0, "black");

ctx.addColorStop(1, "white");

ctx.fillStyle = grd;

Example of color gradient of 3 colors with transparency

JavaScriptSelect and copy to clipboard



var grd = ctx.createLinearGradient(20, 20, 60, 40);

ctx.addColorStop(0, "rgba(0,0,0,0.2)");

ctx.addColorStop(0.3, "rgba(255,0,0,0.2)");

ctx.addColorStop(1, "rgba(255,255,255,0.2)");

ctx.fillStyle = grd;