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?
P


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.

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.


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


November 11, 2011 | 10:03 pm

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


November 11, 2011 | 10:15 pm

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.


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!
P


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