Example
Plugins are used to perform drawing operations. Here the
fill plugin gets applied on the
rectangle plugin.
This operation is called application.
Gray is the default fill style: a gray rectangle!
fill => rect
Example
You can assign properties to plugins. e.g. set a fill color. The
syntax is CSS-like.
fill{color:#f80} => rect
Example
A plugin exists for rounded rectangles. Oh, btw.:
You should really resize your browser window - now! :-)
fill{color:#fff} => roundedRect
Example
You can also set the properties of plugins on the right hand side.
More curves!!!
fill => roundedRect{radius:80}
Example
Using an array-like syntax you can chain plugins: First draw a
shadow, then
fill it. Both plugins in the chain
act on a
roundedRect.
[shadow fill] => roundedRect
Example
You can chain as mainy plugins as you want. Properties can by set on
any plugin.
[shadow border{color:#fff} fill{color:#f80}] => roundedRect{radius:30}
Example
Loads of plugins exist, e.g. the
gradient plugin -
and you can write your own! If you are familiar
with
HTML canvas you're ready to go.
gradient{from:rgba(255, 255, 255, 0.2); to:#888;} => roundedRect{radius:50}
Example
Applications can be chained as well to perform multiple operations
inside one canvas. Just seperate them with a comma.
gradient => rect, border => roundedRect{radius:60}
Example
The application operation can be used recursively by using regular brackets.
This gives a different way of chaining operations.
fill => rect, mandala => ([border{color:#fff; width:1}] => roundedRect{radius:10})