MIDI Kinetics Forum

Hi All,

A Baisc Introduction to the Canvas.
The Canvas object in Lemur is a partial implementation of the Html5 Canvas feature.
This means that lots of html Canvas info can be transferred to the Lemur domain, if it is implemented in Lemur.
I will not attempt a full explanation of it all here and now, but rather add stuff to this thread as time goes.

First some general optimisation ideas, gleaned form general Canvas optimisation principles

* Batch Canvas calls together. Rendering is more expensive the drawing paths, so draw multiple lines then render rather then rendering each line as you go.

* Avoid unnecessary changes to the state of the canvas. Try to keep state changes to a minimum. To draw a pinstripe, rather then change color every stripe, draw all stripes of one color then all stripes of another etc.

* Render on demand where possible. All static parts should be rendered once on load. Parts that change only really need to be rendered when they are changing

* Render screen differences only. Similar to above, only render the differences, not the whole screen. This can be leveraged by a technique called redraw regions.

* Use multiple layered canvases for complex projects. Transparency comes in very handy here to composite stuff.

* Probably avoid floating point coordinates and other things where possible for various reasons.

Just a few thoughts gleaned from some general raves, that pretty much hold true for Lemur as well.
I don't always adhere to all of these but they are worth keeping in mind and they should help...

Canvas programming is another sub world with in Lemur where similar things can be achieved in different ways.
Whilst their is no absolute right way to do something, some ways will end up more efficient then others.

Hopefully this thread will help guide us all

Thanks macciza! Definitely worth keeping in mind!

No worries,
Feel free to contribute stuff you think of . . .

* Lines are not always equal! Lemur lines are right handed, drawing on the right side of the path, rather then being centred, so R-L line draw different to L-R, same with up/down. You can however us enegative line widths to reverse this ...

* Fill then Stroke! Otherwise the fill can cover your stroke, depending on how it is drawn (see above) ...

Cheers

And a few more ...

* Use the Canvas as merely a passive overlay of standard objects, with the canvas set to No Touch the touch get sent to the hidden standard objects which controls the canvas. Basically you can 'skin' the objects however you like ...

* the flip side of this is that if you are designing new self contained canvas objects you may as well use similar name conventions ie x,z etc so your new objects are pretty much dropin replacements in other projects.

* It seems the Canvas is also susceptible to the same startup/initialisation issues that exist in Lemur in general. So there is no guarantee that declared vars, functions etc will be allocated when called by an onLoad script. You can get around this by explicitly re-setting any variables or other references in your init script before refreshing the canvas.

* cheers

I like to have a module of a setup basic canvas that is quick and easy to form to whatever I want, bypassing some initial steps.

Mine personally I call canvasStart and it is set to 'No-Touc'h and 'On Demand' (easy to change later.. although I never use 'Always' draw anymore for any canvas under any circumstances, unless I am just setting it up)
it has 3 scripts initially:
1. the redraw script which just clears the canvas and recalls the shape() script
2. the shape() script, which I usually rename right away, unless there is a just few simple shapes I am drawing. This script has my basic variables declared (for getobject() and getobjectrect()) and a canvas_save and canvas_restore
3. a trigger script (I like to make different trigger scripts, unless easier to do somewhere else, that refresh the canvas so it remains 'On Demand'. This script is just an 'On Load' canvas refresh


Anyway I find having this simple module makes it quick for me to get drawing, and less resistant to using canvas when I want to make something personalized.