/**
* For the tutorial we're going to check out a few of the more advanced features.
* gradients: supported by HTML5 canvas but Linen, at the moment, has no special handling.
* Linen.Path: The model for Path is very basic at this point and this tutorial basically shows it's one use.
* Linen.Model#setCallback(): There isn't a whole lot of uses for a callback but working with images is one.
* Linen.Canvas: You'll see how to embed another HTML5 canvas into your Linen canvas.
*/
/* Get canvas HTML element */
/* Create a Linen instance for the canvas element. */
var Canvas = new Linen("#canvas");
/* How about a nice gradient. */
var grd = Canvas.context().createLinearGradient(0, 0, 0, 200);
grd.addColorStop(0, "pink");
grd.addColorStop(1, "hotpink");
Canvas.addElement("Rectangle").setWidth("100%").setHeight("100%").setXY(0, 0).setFillStyle(grd).setFill();
/* We're going to create a Linen instance with an anonymous canvas. */
var Canvas2 = new Linen();
/* The anonymous canvas has no width or height attributes so we need to set this. */
Canvas2.setWidth(600).setHeight(200);
/* Lets create a new path and make it the clipping mask. Hint: it say's KITTEN */
Canvas2.addElement("Path")
.addPath("M 23.901 85.447 L 68.998 0 L 84.421 20.573 L 42.832 99.474 L 92.972 200 L 62.859 200 L 23.901 115.722 L 23.901 200 L 0 200 L 0 3.039 L 23.901 3.039 L 23.901 85.447 Z M 113.869 3.039 L 137.77 3.039 L 137.77 200 L 113.869 200 L 113.869 3.039 Z M 162.913 3.039 L 259.102 3.039 L 259.102 31.093 L 223.141 31.093 L 223.141 200 L 199.24 200 L 199.24 31.093 L 162.913 31.093 L 162.913 3.039 Z M 274.509 3.039 L 370.698 3.039 L 370.698 31.093 L 334.737 31.093 L 334.737 200 L 310.836 200 L 310.836 31.093 L 274.509 31.093 L 274.509 3.039 Z M 393.992 3.039 L 467.668 3.039 L 467.668 31.093 L 417.893 31.093 L 417.893 75.745 L 453.123 75.745 L 453.123 103.799 L 417.893 103.799 L 417.893 171.946 L 469.495 171.946 L 469.495 200 L 393.992 200 L 393.992 3.039 Z M 576.099 3.039 L 600 3.039 L 600 200 L 573.541 200 L 519.673 52.718 L 519.673 200 L 495.772 200 L 495.772 3.039 L 522.231 3.039 L 576.099 150.321 L 576.099 3.039 Z")
.setTransorm(.9, 0, 0, .9)
.setXY(30, 10)
.setClip(); // set as clipping mask
/* Now we"ll render the image that will get clipped. Hint: it's a KITTEN! */
Canvas2.addElement("Image")
.setSrc("http://placekitten.com/600/200")
.setXY(0, 0)
.setCallback(function(){
/* After the image finishes loading we now can embed the anonymous canvas onto the visible canvas element. */
Canvas.addElement("Canvas").setCanvas(Canvas2.canvas).setSetting("zindex", 2);
/* Render the canvas element onto the visible canvas. */
Canvas.render();
});
Canvas2.render();