var CompositeBox = canvascontrols.CompositeShape.extend({ init: function (options) { this._super(options); this.l = options.l; this.hovered = false; this.on("mouseover", this, function () { this.hovered = true; this.invalidate(); }); this.on("mouseout", this, function () { this.hovered = false; this.invalidate(); }); this.on("click", this, function () { $("output").text( "You clicked " + this.l + "<br />" + $("output").text() ); }); }, paint: function (context) { context.save(); context.fillStyle = this.hovered ? "#CCCCCC" : "#FFFFFF"; context.strokeStyle = this.hovered ? "#0000FF" : "#000000"; context.fillRect(0, 0, this.width(), this.height()); context.strokeRect(0, 0, this.width(), this.height()); context.fillStyle = "#000000"; context.fillText(this.l, 0, this.height()); context.restore(); this._super(context); } }); var canvasView = new canvascontrols.CanvasView("#canvas"); var root1 = canvasView.add(new CompositeBox({ x: 10, y: 10, l: "1" })); var root2 = canvasView.add(new CompositeBox({ x: 175, y: 10, l: "2" })); var child11 = root1.add(new CompositeBox({ x: 5, y: 10, width: 70, height: 100, l: "11" })); var child12 = root1.add(new CompositeBox({ x: 55, y: 120, width: 45, height: 40, l: "12" })); var grandChild111 = child11.add(new CompositeBox({ width: 20, height: 20, l: "111" })); var child21 = root2.add(new CompositeBox({ x: 30, y: 15, width: 130, height: 60, l: "21" })); canvasView.paint();