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
Constructor Attributes | Constructor Name and Description |
---|---|
CanvasRenderingContext2D(maxCanvas)
|
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 |
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
|
String |
Three types for textBaseline
|
Number |
The width of rendering context
|
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 |
clearInterval(task)
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 |
isPointInPath(x, y)
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 |
parseFontString(font)
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 |
restore()
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)- 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
- butt
- round
- square
- Default Value:
- "butt"
{String}
lineJoin
No Info. Options are
- round
- bevel
- miter
- 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:
- strokeStyle
- fillStyle
- globalAlpha
- lineWidth
- lineCap
- lineJoin
- shadowOffsetX
- shadowOffsetY
- shadowColor
- font
- textAlign
- textBaseline
- 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
- "start" == "left"
- "end" == "right"
- <"center"(middle??)
- 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
- "top" == "hanging"
- "middle", "alphabetic"
- <"bottom" == "ideographic"/li>
- 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.
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
- redraw
- paint
- roundedRect
- setTimeout
- clearTimeout
- setInterval
- clearInterval
- 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
- redraw
- paint
- roundedRect
- setTimeout
- clearTimeout
- setInterval
- clearInterval
- 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
- redraw
- paint
- roundedRect
- setTimeout
- clearTimeout
- setInterval
- clearInterval
{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
- redraw
- paint
- roundedRect
- setTimeout
- clearTimeout
- setInterval
- clearInterval
{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
- redraw
- paint
- roundedRect
- setTimeout
- clearTimeout
- setInterval
- clearInterval
- 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
- redraw
- paint
- roundedRect
- setTimeout
- clearTimeout
- setInterval
- clearInterval
- 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
- redraw
- paint
- roundedRect
- setTimeout
- clearTimeout
- setInterval
- clearInterval
- 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