Today's been an interesting day for webOS.  If you're a webOS developer (which is probably a safe assumption if you're reading this), you're probably already aware of HP's decision to jettison its hardware division.  As a result, there are in effect no webOS phones or tablets to be released unless they find a suitable hardware partner.  According to the fine folks over at This Is My Next, HP isn't walking away from webOS.  For now, I'll buy into that and continue to create things for a platform I believe deserves to thrive.

That said, I've taken time off from posting due to the birth of my daughter (our third child).  As a result, I haven't taken much time to plan out the next couple posts.  But, I wanted to get something out today so I'll cover how to get started with the HTML5 canvas tag in enyo.

[[MORE]]

Enyo doesn't provide much for developing in canvas; it doesn't really need to.  Canvas in enyo is the same as in normal web development.  There are a couple minor hurdles you have to overcome, however.

First, how do you create a <canvas> tag when all enyo controls are defined in JavaScript?  The undocumented nodeTag property, of course!  DomNode includes this property and uses it to determine the string to pass to document.createElement.  So, to create an enyo canvas control, set the nodeTag property to "canvas"!

{name:"myCanvasTag", nodeTag:"canvas"}

Second, how do you get a reference to the drawing context to draw on the canvas.  Like other enyo controls, the DOM node doesn't exist until the control is rendered.  The simplest solution is to override rendered() in the control containing the canvas and call your drawing methods there.

rendered:function() {
    var n = this.$.myCanvasTag.hasNode();
    var ctx = n.getContext("2d");
    ctx.fillRect(0,0,100,100);
}

Here's a complete example that creates 5 canvas tags using VirtualRepeater.

var _App = {
    name:"com.technisode.example.App",
    kind:"Control",
    components:[
        {name: "repeater", kind:"VirtualRepeater", onSetupRow:"setupRow", components:[
            {name: "canvas", nodeTag:"canvas"}
        ]}
    ],
    rendered:function() {
        this.inherited(arguments);
       
        for(var i=0;i<5;i++) {
            // this is a protected method so ... palm may not like you using it ...
            this.$.repeater.prepareRow(i);
            var n = this.$.canvas.hasNode();
            n.width = 150;
            n.height = 150;
            n.getContext("2d").strokeText("I am item " + i, 10, 10);
        }
    },
    setupRow:function(source, index) {
        if(index < 5) {
            return true;
        }
    }
}

enyo.kind(_App);