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?
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.
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.
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.
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() ?
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.
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.
There doesn’t seem to be support for getting the pixel size of a loaded image object. According to this
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.
var img = new Image("oscillator.tif"); post("nimg size",img.naturalWidth,img.naturalHeight);
img size 64 64
in the max window. It gives undefined.
don’t mind me while i keep a running diary here :)
` ctx.font = "18px Arial";’
works. I guess "pt" is out of bounds!