MaxCanvas jsui documentation?

Nov 11, 2011 at 3:54pm

MaxCanvas jsui documentation?

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

#59960
Nov 11, 2011 at 4:38pm

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.

#215872
Nov 11, 2011 at 5:10pm

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.

#215873
Nov 11, 2011 at 6:14pm

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.

http://cycling74.com/forums/topic.php?id=36044

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

#215874
Nov 11, 2011 at 7:59pm

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() ?

#215875
Nov 11, 2011 at 9:00pm

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.

#215876
Nov 11, 2011 at 9:20pm

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 that
ctx.textAlign = "center";
doesn’t work right – it just paints the text starting from the far left edge of the JSUI window.

Peter

#215877
Nov 11, 2011 at 10:03pm

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 :)

#215878
Nov 11, 2011 at 10:15pm

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.

#215879
Nov 11, 2011 at 11:39pm

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

#215880

You must be logged in to reply to this topic.