Forums > Javascript

MaxCanvas jsui documentation?

November 11, 2011 | 3:54 pm

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?

November 11, 2011 | 4:38 pm

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.

November 11, 2011 | 5:10 pm

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.

November 11, 2011 | 6:14 pm

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.

November 11, 2011 | 7:59 pm

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

November 11, 2011 | 9:00 pm

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.

November 11, 2011 | 9:20 pm

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
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.


November 11, 2011 | 10:03 pm

Ooo….just found this:
Illustrator to Canvas. This could be VERY handy. Or a total disaster. Worth trying!
Illustrator as canvas.gen :)

November 11, 2011 | 10:15 pm

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

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

November 11, 2011 | 11:39 pm

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!

Viewing 10 posts - 1 through 10 (of 10 total)

Forums > Javascript