Classes


Last modified: 2013-3-2

Class CanvasRenderingContext2D

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

The rendering context for MaxCanvas in combination with MGraphics.

Defined in: CanvasExtension.js

Class Summary
Constructor Attributes Constructor Name and Description
 
The rendering context for MaxCanvas in combination with MGraphics.
Field Summary
Field Attributes Field Name and Description
Number 
Aspect ratio of the rendering context.
String 
TODO description
String 
no support for generic font families (e.g.
 
No Info
Float 
for compositing
Number 
The height of the rendering context
String 
No Info.
String 
No Info.
Integer 
TODO description
MGraphics 
mg
The MGraphics object.
String 
TODO description
Integer 
TODO description
Integer 
TODO description
 
Stores the state, see functions save and restore.
String 
TODO description
String 
Three types of text align
  • "start" == "left"
  • "end" == "right"
  • <"center"(middle??)
String 
Three types for textBaseline
  • "top" == "hanging"
  • "middle", "alphabetic"
  • <"bottom" == "ideographic"/li>
Number 
The width of rendering context
Method Summary
Method Attributes Method Name and Description
void 
arc(x, y, r, startAngle, endAngle, clockwise)
TODO description
void 
arcTo(x1, y1, x2, y2, radius)
TODO description
void 
path API
Resets the current path.
void 
bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)
TODO description
void 
Not part of the canvas-api.
void 
clearRect(x, y, w, h)
Clears all pixels on the canvas in the given rectangle to transparent black.
void 
clearTimeout(task)
Not part of the canvas-api.
void 
Marks the current subpath as closed, and starts a new subpath with a point the same as the start and end of the newly closed subpath.
ImageData 
createImageData(arg1, arg2)
pixel manipulation
ImageData createImageData(in float sw, in float sh);
ImageData createImageData(in ImageData imagedata);
CanvasGradient 
createLinearGradient(x0, y0, x1, y1)
TODO description colors and styles
CanvasPattern 
createPattern(image, repetition)
TODO description colors and styles
CanvasGradient 
createRadialGradient(x0, y0, r0, x1, y1, r1)
TODO description colors and styles
void 
drawImage(image, arg1, arg2, arg3, arg4, arg5, arg6, arg7, arg8)
TODO description drawing images
void 
fill()
TODO description "Paths, when filled or stroked, must be painted without affecting the current path"
void 
fillRect(x, y, w, h)
Fills all pixels on the canvas in the given rectangle.
void 
fillText(text, x, y, maxWidth)
TODO description
 
Empty function.
Float 
getTextAlign(textString)
helper methods TODO description
Float 
helper methods TODO description
Float 
getTextScale(maxWidth, text)
helper methods TODO description
Boolean 
Points on the path itself are considered to be inside the path.
void 
lineTo(x, y)
TODO description
Number 
measureText(text)
TODO description
void 
moveTo(x, y)
Creates a new subpath with the given point.
void 
paint()
Not part of the canvas-api.
Array 
helper methods TODO description
void 
putImageData(imagedata, dx, dy, dirtyX, dirtyY, dirtyWidth, dirtyHeight)
void putImageData(in ImageData imagedata, in float dx, in float dy, in optional float dirtyX, in float dirtyY, in float dirtyWidth, in float dirtyHeight);
void 
quadraticCurveTo(cpx, cpy, x, y)
TODO description
void 
rect(x, y, w, h)
TODO description
void 
redraw()
Not part of the canvas-api.
void 
State restore
void 
rotate(x)
TODO description transformations (default transform is the identity matrix)
void 
roundedRect(x, y, w, h, ow, oh)
Not part of the canvas-api.
void 
save()
State save state
void 
scale(x, y)
TODO description transformations (default transform is the identity matrix)
Task 
setInterval(expression, interval)
Not part of the canvas-api.
void 
setSource(style)
helper methods TODO description
Task 
setTimeout(expression, timeout)
Not part of the canvas-api.
void 
setTransform(m11, m12, m21, m22, dx, dy)
TODO description transformations (default transform is the identity matrix)
void 
stroke()
TODO description
void 
strokeRect(x, y, w, h)
TODO description
void 
strokeText(text, x, y, maxWidth)
TODO description
void 
transform(m11, m12, m21, m22, dx, dy)
TODO description transformations (default transform is the identity matrix)
void 
translate(x, y)
TODO description transformations (default transform is the identity matrix)
Class Detail

CanvasRenderingContext2D

(maxCanvas)
The rendering context for MaxCanvas in combination with MGraphics.

Defined in: CanvasExtension.js
Example:
function MaxCanvas(jsui)
{
	if (!jsui || !(jsui instanceof js)) {
		post("missing or wrong argument for MaxCanvas,"+
		" call \"new MaxCanvas(this);\"\n");
		return;
	}
	jsui.mgraphics.init();
	jsui.mgraphics.relative_coords = 0;
	jsui.mgraphics.autofill = 0;

	this.context = new CanvasRenderingContext2D(jsui);
	var that = this;

	jsui.onresize = function(w, h)
	{
		that.context.aspect = w/h;
		that.context.width  = w;
		that.context.height = h;
		if (jsui.onresizeCanvas)
			jsui.onresizeCanvas(w,h);
	}
	return this;
}
Parameters:
{jsui} maxCanvas
 
Field Detail
{Number}

aspect

Aspect ratio of the rendering context. ( this.width / this.height )
Example:
this.context = new CanvasRenderingContext2D(jsui);
var that = this;

jsui.onresize = function(w, h)
{
	that.context.aspect = w/h;
	that.context.width  = w;
	that.context.height = h;
	if (jsui.onresizeCanvas)
		jsui.onresizeCanvas(w,h);
}

{String}

fillStyle

TODO description
Example:
// see MAX_PATH/Cycling '74/examples/javascript/ui-canvas/canvas-examples.js

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

  for (i=0;i<6;i++){
    for (j=0;j<6;j++){
      ctx.fillStyle = 'rgb(' + Math.floor(255-42.5*i) + ',' +
                       Math.floor(255-42.5*j) + ',0)';
      ctx.fillRect(j*25,i*25,25,25);
    }
  }
}
Default Value:
"rgba(0,0,0,1.0)"

{String}

font

no support for generic font families (e.g. sans-serif), use case-sensitive font-family name e.g. Verdana
Example:
var ctx = myCanvas.getContext('max-2d');
ctx.font = "25px Times New Roman bold";
Default Value:
"10px Arial"

fontlist

No Info
Example:
//TODO not tested
// get all the fonts available on this machine
var ctx = myCanvas.getContext('max-2d');
ctx.fontlist = mgraphics.getfontlist();

{Float}

globalAlpha

for compositing
Example:
var ctx = myCanvas.getContext('max-2d');
ctx.fillStyle = '#09F'       // Make changes to the settings
ctx.globalAlpha = 0.5;
ctx.fillRect(15,15,120,120); // Draw a rectangle with new settings
ctx.save();                  // Save the current state
Default Value:
1.0

{Number}

height

The height of the rendering context
Example:
this.context = new CanvasRenderingContext2D(jsui);
var that = this;

jsui.onresize = function(w, h)
{
	that.context.aspect = w/h;
	that.context.width  = w;
	that.context.height = h;
	if (jsui.onresizeCanvas)
		jsui.onresizeCanvas(w,h);
}

{String}

lineCap

No Info. Options are
Default Value:
"butt"

{String}

lineJoin

No Info. Options are
Example:
ctx.lineWidth = 2;
ctx.lineJoin = "round";
ctx.strokeStyle = "orange";
ctx.strokeText(myFont, 20, origin, 530);
Default Value:
"miter"

{Integer}

lineWidth

TODO description
Example:
function simpleShapes1()
{
    var myCanvas = new MaxCanvas(this);
    var ctx = myCanvas.getContext('max-2d');

    with (ctx) {
        save();

        shadowOffsetX = 3;
        shadowOffsetY = 5;
        shadowColor = "rgba(0, 0, 0, 0.5)";

        fillStyle = "rgba(120, 32,113,0.8)";
        fillStyle = "#e3a5d4";

        fillRect(20, 50, 140,114);
        fillStyle = "rgba(239,22,55,0.5)";
       fillRect(56, 33, 143, 53);

        scale(1,2);
        clearStyle="#ffff";    //clear to white
       clearRect(44, 30, 40, 20);

       scale(2,1);
        strokeStyle = "rgba(79,12,25,0.6)";
       lineWidth =2;
       strokeRect(5,32, 142, 27);

        restore();
    }
}
Default Value:
1

{MGraphics}

mg

The MGraphics object.
Example:
	jsui.mgraphics.init();
	jsui.mgraphics.relative_coords = 0;
	jsui.mgraphics.autofill = 0;

	this.context = new CanvasRenderingContext2D(jsui);

{String}

shadowColor

TODO description
Example:
function test5(){

    var tmp = ctx.createRadialGradient(100,100,80,40,60,80);
    tmp.addColorStop(0.0, '#000');
    tmp.addColorStop(1.0, '#fff');

    ctx.shadowOffsetX = 13;
    ctx.shadowOffsetY = 18;
    ctx.shadowColor = "rgba(0, 34, 142, 0.5)";

    var pat = mgraphics.pattern_create_radial(100, 100, 0, 150, 120, 0);
    pat.add_color_stop_rgba(0.,1.,0.,0.,1.);
    pat.add_color_stop_rgba(1.,0.,1.,0.,1.);
    pat.add_color_stop_rgba(1.,0.,0.,0.,0.);
    mgraphics.set_source(pat);

    mgraphics.move_to(10,10);
    mgraphics.line_to(10,300);
    mgraphics.line_to(300,300);
    mgraphics.line_to(300,10);
    mgraphics.close_path();
    mgraphics.fill();

    var pt = mgraphics.get_current_point();
    //post("point: " + pt[0] + "/" + pt[1] + "\n");
}
Default Value:
"rgba(0,0,0,1.0)"

{Integer}

shadowOffsetX

TODO description
Example:
function test8(){
    var shadowOffsetX = 2;
    var shadowOffsetY = 1;
    mgraphics.set_source_rgba(0.,0.,0.,1.);
    mgraphics.translate(200, 170);

   // get all the fonts available on this machine
   var fontlist = mgraphics.getfontlist();

    // print some of them
   if (fontlist.length > 80){
       for(var f=1; f<80; f++)
       {
           mgraphics.select_font_face(fontlist[f],0,0);
           mgraphics.set_font_size(18);

            // drawing shadow
           mgraphics.save();
           mgraphics.set_source_rgba(0.1,0.1,0.1,1.);
           mgraphics.move_to(20+shadowOffsetX, 10+shadowOffsetY);
           mgraphics.show_text(fontlist[f]);
           mgraphics.restore();

           // drawing text
           mgraphics.move_to(20, 10);
           mgraphics.text_path(fontlist[f]);
           mgraphics.fill_with_alpha(1.0);


           mgraphics.translate(0, 25);
            mgraphics.rotate(20);
       }
   }
}
Default Value:
0

{Integer}

shadowOffsetY

TODO description
Example:

function test8(){
    var shadowOffsetX = 2;
    var shadowOffsetY = 1;
    mgraphics.set_source_rgba(0.,0.,0.,1.);
    mgraphics.translate(200, 170);

   // get all the fonts available on this machine
   var fontlist = mgraphics.getfontlist();

    // print some of them
   if (fontlist.length > 80){
       for(var f=1; f<80; f++)
       {
           mgraphics.select_font_face(fontlist[f],0,0);
           mgraphics.set_font_size(18);

            // drawing shadow
           mgraphics.save();
           mgraphics.set_source_rgba(0.1,0.1,0.1,1.);
           mgraphics.move_to(20+shadowOffsetX, 10+shadowOffsetY);
           mgraphics.show_text(fontlist[f]);
           mgraphics.restore();

           // drawing text
           mgraphics.move_to(20, 10);
           mgraphics.text_path(fontlist[f]);
           mgraphics.fill_with_alpha(1.0);


           mgraphics.translate(0, 25);
            mgraphics.rotate(20);
       }
   }
}
Default Value:
0

stateStack

Stores the state, see functions save and restore. Contents of a state are:
Example:
    this.save = function ()
	{
        var currentState = [];
        currentState[0] = this.strokeStyle;
        currentState[1] = this.fillStyle;
        currentState[2] = this.globalAlpha;
        currentState[3] = this.lineWidth;
        currentState[4] = this.lineCap;
        currentState[5] = this.lineJoin;
//        currentState[6] = this.miterLimit;
        currentState[7] = this.shadowOffsetX;
       currentState[8] = this.shadowOffsetY;
//        currentState[9] = this.shadowBlur;
        currentState[10] = this.shadowColor;
//        currentState[11] = this.globalCompositeOperation;
        currentState[12] = this.font;
        currentState[13] = this.textAlign;
        currentState[14] = this.textBaseline;
        this.stateStack.push(currentState);
	    this.mg.save();
	}

{String}

strokeStyle

TODO description
Example:
// see MAX_PATH/Cycling '74/examples/javascript/ui-canvas/canvas-examples.js

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

  for (i=0;i<6;i++){
    for (j=0;j<6;j++){
      ctx.strokeStyle = 'rgb(0,' + Math.floor(255-42.5*i) + ',' +
                       Math.floor(255-42.5*j) + ')';
      ctx.beginPath();
      ctx.arc(12.5+j*25,12.5+i*25,10,0,Math.PI*2,true);
      ctx.stroke();
    }
  }
}
Default Value:
"rgba(0,0,0,1.0)"

{String}

textAlign

Three types of text align
Example:
// Max6/examples/javascript/ui-canvas/canvas-examples.js
var myFont = "26px Georgia bold italic";
ctx.font = myFont;
ctx.textAlign = "middle";
Default Value:
"start"

{String}

textBaseline

Three types for textBaseline
Example:
//TODO Add example
Default Value:
"alphabetic"

{Number}

width

The width of rendering context
Example:
this.context = new CanvasRenderingContext2D(jsui);
var that = this;

jsui.onresize = function(w, h)
{
	that.context.aspect = w/h;
	that.context.width  = w;
	that.context.height = h;
	if (jsui.onresizeCanvas)
		jsui.onresizeCanvas(w,h);
}
Method Detail
{void}

arc

(x, y, r, startAngle, endAngle, clockwise)
TODO description
Example:
function arc_example(){
  var myCanvas = new MaxCanvas(this);

  // Make sure we don't execute when canvas isn't supported
  if (myCanvas.getContext){
   // use getContext to use the canvas for drawing
    var ctx = myCanvas.getContext('max-2d');
    // Draw shapes
    for (i=0;i<4;i++){
     for(j=0;j<3;j++){
        ctx.beginPath();
        var x          = 25+j*50;               // x coordinate
        var y          = 25+i*50;               // y coordinate
        var radius     = 20;                    // Arc radius
       var startAngle = 0;                     // Starting point on circle
        var endAngle   = Math.PI+(Math.PI*j)/2; // End point on circle
        var clockwise  = i%2==0 ? false : true; // clockwise or anticlockwise

        ctx.arc(x,y,radius,startAngle,endAngle, clockwise);

        if (i>1){
         ctx.fill();
        } else {
          ctx.stroke();
        }
      }
    }
  }
}
Parameters:
{integer} x
x coordinate
{integer} y
y coordinate
{float} r
Arc radius
{float} startAngle
Starting point on circle
{float} endAngle
End point on circle
{boolean} clockwise
clockwise or anticlockwise
 

{void}

arcTo

(x1, y1, x2, y2, radius)
TODO description
Example:

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

    ctx.beginPath();
    ctx.moveTo(10, 100);
    ctx.lineTo(20,130);
    ctx.arcTo(150,200,50,280,50);
    ctx.stroke();
}
Parameters:
x1
y1
x2
y2
radius
 

{void}

beginPath

()
path API
Resets the current path.
Example:
function rect(x,y,w,h) {
  ctx.beginPath();
  ctx.fillRect(x,y,w,h);
  ctx.closePath();
}

{void}

bezierCurveTo

(cp1x, cp1y, cp2x, cp2y, x, y)
TODO description
Example:
//TODO Add example
Parameters:
cp1x
cp1y
cp2x
cp2y
x
y
 

{void}

clearInterval

(task)
Not part of the canvas-api. the following 7 methods are not part of the canvas-api and may be removed in the future
Parameters:
task
 

{void}

clearRect

(x, y, w, h)
Clears all pixels on the canvas in the given rectangle to transparent black.
Example:
//TODO Add example
Parameters:
x
y
w
h
 

{void}

clearTimeout

(task)
Not part of the canvas-api. the following 7 methods are not part of the canvas-api and may be removed in the future
Parameters:
task
 

{void}

closePath

()
Marks the current subpath as closed, and starts a new subpath with a point the same as the start and end of the newly closed subpath.
Example:
function rect(x,y,w,h) {
  ctx.beginPath();
  ctx.fillRect(x,y,w,h);
  ctx.closePath();
}

{ImageData}

createImageData

(arg1, arg2)
pixel manipulation
ImageData createImageData(in float sw, in float sh);
ImageData createImageData(in ImageData imagedata);
Example:
//TODO Add example
Parameters:
arg1
arg2
 

{CanvasGradient}

createLinearGradient

(x0, y0, x1, y1)
TODO description colors and styles
Example:
var myCanvas = new MaxCanvas(this);
var ctx = myCanvas.getContext('max-2d');
var gradient = ctx.createLinearGradient(0,50,0,95);
Parameters:
{Integer} x0
{Integer} y0
{Integer} x1
{Integer} y1
 

{CanvasPattern}

createPattern

(image, repetition)
TODO description colors and styles
Example:
//TODO Add example
Parameters:
image
repetition
 

{CanvasGradient}

createRadialGradient

(x0, y0, r0, x1, y1, r1)
TODO description colors and styles
Example:
var myCanvas = new MaxCanvas(this);
var ctx = myCanvas.getContext('max-2d');
var gradient = ctx.createRadialGradient(100,100,80,40,60,80);
Parameters:
{Integer} x0
{Integer} y0
{Integer} r0
{Integer} x1
{Integer} y1
{Integer} r1
 

{void}

drawImage

(image, arg1, arg2, arg3, arg4, arg5, arg6, arg7, arg8)
TODO description drawing images
Example:
//TODO Add example
Parameters:
image
arg1
arg2
arg3
arg4
arg5
arg6
arg7
arg8
 

{void}

fill

()
TODO description "Paths, when filled or stroked, must be painted without affecting the current path"
Example:
//TODO Add example

{void}

fillRect

(x, y, w, h)
Fills all pixels on the canvas in the given rectangle.
Example:
//TODO Add example
Parameters:
x
y
w
h
 

{void}

fillText

(text, x, y, maxWidth)
TODO description
Example:
//TODO Add example
Parameters:
text
x
y
maxWidth
 

getImageData

()
Empty function. ImageData getImageData(in float sx, in float sy, in float sw, in float sh);

{Float}

getTextAlign

(textString)
helper methods TODO description
Example:
//TODO Add example
Parameters:
textString
 

{Float}

getTextBaseline

()
helper methods TODO description
Example:
//TODO Add example

{Float}

getTextScale

(maxWidth, text)
helper methods TODO description
Example:
//TODO Add example
Parameters:
maxWidth
text
 

{Boolean}

isPointInPath

(x, y)
Points on the path itself are considered to be inside the path. -> not true for the underlying juce method
Example:
//TODO Add example
Parameters:
x
y
 

{void}

lineTo

(x, y)
TODO description
Example:
//TODO Add example
Parameters:
x
y
 

{Number}

measureText

(text)
TODO description
Example:
//TODO
Parameters:
text
 

{void}

moveTo

(x, y)
Creates a new subpath with the given point.
Example:
//TODO Add example
Parameters:
x
y
 

{void}

paint

()
Not part of the canvas-api. the following 7 methods are not part of the canvas-api and may be removed in the future

{Array}

parseFontString

(font)
helper methods TODO description
Example:
//TODO Add example
Parameters:
font
 

{void}

putImageData

(imagedata, dx, dy, dirtyX, dirtyY, dirtyWidth, dirtyHeight)
void putImageData(in ImageData imagedata, in float dx, in float dy, in optional float dirtyX, in float dirtyY, in float dirtyWidth, in float dirtyHeight);
Example:
//TODO Add example
Parameters:
imagedata
dx
dy
dirtyX
dirtyY
dirtyWidth
dirtyHeight
 

{void}

quadraticCurveTo

(cpx, cpy, x, y)
TODO description
Example:
//TODO Add example
Parameters:
cpx
cpy
x
y
 

{void}

rect

(x, y, w, h)
TODO description
Example:
//TODO Add example
Parameters:
x
y
w
h
 

{void}

redraw

()
Not part of the canvas-api. the following 7 methods are not part of the canvas-api and may be removed in the future

{void}

restore

()
State restore
Example:
//TODO Add example

{void}

rotate

(x)
TODO description transformations (default transform is the identity matrix)
Example:
//TODO Add example
Parameters:
x
 

{void}

roundedRect

(x, y, w, h, ow, oh)
Not part of the canvas-api. the following 7 methods are not part of the canvas-api and may be removed in the future
Parameters:
x
y
w
h
ow
oh
 

{void}

save

()
State save state
Example:
//TODO Add example

{void}

scale

(x, y)
TODO description transformations (default transform is the identity matrix)
Example:
//TODO Add example
Parameters:
x
y
 

{Task}

setInterval

(expression, interval)
Not part of the canvas-api. the following 7 methods are not part of the canvas-api and may be removed in the future
Parameters:
expression
interval
 

{void}

setSource

(style)
helper methods TODO description
Example:
//TODO Add example
Parameters:
style
 

{Task}

setTimeout

(expression, timeout)
Not part of the canvas-api. the following 7 methods are not part of the canvas-api and may be removed in the future
Parameters:
expression
timeout
 

{void}

setTransform

(m11, m12, m21, m22, dx, dy)
TODO description transformations (default transform is the identity matrix)
Example:
//TODO Add example
Parameters:
m11
m12
m21
m22
dx
dy
 

{void}

stroke

()
TODO description
Example:
//TODO Add example

{void}

strokeRect

(x, y, w, h)
TODO description
Example:
//TODO Add example
Parameters:
x
y
w
h
 

{void}

strokeText

(text, x, y, maxWidth)
TODO description
Example:
//TODO Add example
Parameters:
text
x
y
maxWidth
 

{void}

transform

(m11, m12, m21, m22, dx, dy)
TODO description transformations (default transform is the identity matrix)
Example:
//TODO Add example
Parameters:
m11
m12
m21
m22
dx
dy
 

{void}

translate

(x, y)
TODO description transformations (default transform is the identity matrix)
Example:
//TODO Add example
Parameters:
x
y
 

©2012-2013
Max MSP Documentation copied to JsDoc by Tim Schenk SEO Frelancer Berlin. Some examples are by him. Some descriptions of classes, interfaces, properties, methods or events are by him. Until now, most of it is a copy. Published with permission of Cycling '74. This document might be wrong or incomplete. All informations without any warranty. All trademarks are the property of their respective owners. Documentation generated by JsDoc Toolkit on 2013-3-2