MaxCanvas jsui documentation?

Peter Nyboer's icon

I feel like I'm asking a question that's been answered, but searching the forum, max help, and my emails has proven fruitless. Is there any documentation beyond the canvas-examples.maxpat file? Or a recommended reference?
P

Joshua Kit Clayton's icon

Just the examples, and any online HTML5 Canvas reference. MaxCanvas is just a JS wrapper for MGraphics to assist in porting Canvas code from HTML.

Peter Nyboer's icon

Ok, good to know. It seems that documentation of the use of mgraphics in jsui is equally terse at the moment? I'm pulling things apart to get to a place I can try to build something, and it's working. I'll post some simpler examples when I have something, and hopefully get confirmation that my extrapolations are correct before I proceed on an unwise path.

Joshua Kit Clayton's icon

Darwin is currently working more detailed mgraphics documentation. As he is doing that, he's putting together a JSUI-mgraphics a day patch, which I highly recommend. Don't miss it.

FWIW, if you're not porting from HTML5 Canvas code, using mgraphics directly will be faster, as it eliminates an extra JS layer.

Peter Nyboer's icon

Ah, there we go. I'm going with canvas at the moment, and will sacrifice a bit of speed for portability. So it looks like paint() is a reserved special function that is called by mgraphics.redraw() ?

Darwin Grosse's icon

Yup - paint() is the magic juice on a redraw(). It is called any time a redraw is required, whether activated by code or by the UI drawing system.

Peter Nyboer's icon

Excellent. Here's some SUPER BASIC examples that should help someone get started with canvas. Like me, for example :)
The functions where stuff actually happens are setup so you can cut an paste from simple canvas examples and see how they work.

I did notice that the font stuff doesn't really work. I wasn't able to specify a font name or size. According to http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#dom-context-2d-font
the font syntax follows that of CSS. The examples I tried didn't work in Max6, I just got errors:font "18pt Arial" not available, using default
It also seems thatctx.textAlign = "center";
doesn't work right - it just paints the text starting from the far left edge of the JSUI window.

Peter

2888.BasicCanvasJSUI.zip
zip
Peter Nyboer's icon

Ooo....just found this:
http://visitmix.com/labs/ai2canvas/
Illustrator to Canvas. This could be VERY handy. Or a total disaster. Worth trying!
Illustrator as canvas.gen :)

Peter Nyboer's icon

fwiw....
There doesn't seem to be support for getting the pixel size of a loaded image object. According to this
http://www.w3.org/TR/html5/embedded-content-1.html#htmlimageelement
it looks like you should be able to get the value of the image file's original pixel dimensions with the natrualWidth and naturalHeight properties.
e.g.

var img = new Image("oscillator.tif");
post("nimg size",img.naturalWidth,img.naturalHeight);

should print
img size 64 64
in the max window. It gives undefined.

Peter Nyboer's icon

don't mind me while i keep a running diary here :)
regarding font,
`    ctx.font = "18px Arial";'
works. I guess "pt" is out of bounds!
P