Last modified: 2013-3-2

Class CanvasGradient

Canvas-Api for Max (can be found in MAX_PATH/Cycling '74/jsextensions/)

Canvas allows us to fill and stroke shapes using linear and radial gradients using the following methods...

Defined in: CanvasExtension.js

See: HTML5 Canvas

Class Summary
Constructor Attributes	Constructor Name and Description
	CanvasGradient(patternObj, radiHelper) Canvas allows us to fill and stroke shapes using linear and radial gradients using the following methods.

Field Summary
Field Attributes	Field Name and Description
Pattern	pattern an MGraphics Pattern object instance.
Float	radialHelper when jgraphics-radialGradient is working, but until then, to achive an effect somehow like it should be:

Method Summary
Method Attributes	Method Name and Description
void	addColorStop(offset, color) Calls MGraphics.add_color_stop_rgba() internally.

Class Detail

CanvasGradient

(patternObj, radiHelper)

Canvas allows us to fill and stroke shapes using linear and radial gradients using the following methods...

Defined in: CanvasExtension.js

Example:

var mg = maxCanvas.mgraphics;
var pattern = mg.pattern_create_linear(x0, y0, x1, y1);
var gradient = new CanvasGradient(pattern, 0.);

//or
var myCanvas = new MaxCanvas(this);
var ctx = myCanvas.getContext('max-2d');
var gradient = ctx.createLinearGradient(0,50,0,95);

Parameters:
{Pattern} patternObj: an MGraphics Pattern object instance.
{Float} radiHelper

See:: HTML5 Canvas

Field Detail

{Pattern}

pattern

an MGraphics Pattern object instance.

Example:

var mg = maxCanvas.mgraphics;
var pattern = mg.pattern_create_linear(x0, y0, x1, y1);
var gradient = new CanvasGradient(pattern, 0.);

{Float}

radialHelper

when jgraphics-radialGradient is working, but until then, to achive an effect somehow like it should be:

Example:

var mg = maxCanvas.mgraphics;
var pattern = mg.pattern_create_linear(x0, y0, x1, y1);
var gradient = new CanvasGradient(pattern, 0.);

Method Detail

{void}

addColorStop

(offset, color)

Calls MGraphics.add_color_stop_rgba() internally. Description from there is: A function called on a previously created pattern, the add_color_stop_rgba will define a color value for one of the influence points of the pattern. The index parameter determine which influence point is being defined.

If this.radialHelper != 0. and offset == 0., this.radialHelper is used instead of offset.

Example:

var myCanvas = new MaxCanvas(this);
var ctx = myCanvas.getContext('max-2d');

// Create gradients
var lingrad = ctx.createLinearGradient(0,0,0,150);
lingrad.addColorStop(0, '#00ABEB');
lingrad.addColorStop(0.5, '#fff');
lingrad.addColorStop(0.5, '#66CC00');
lingrad.addColorStop(1, '#fff');

Parameters:
{Float} offset: Value between 0.0 and 1.0
{Array} color: RGBA Float Array

Classes

Max/MSP Jitter Javascript Reference

Class CanvasGradient

CanvasGradient

pattern

radialHelper

addColorStop