Edit in JSFiddle

var MyApp = global.MyApp = SC.Object.create();

MyApp.ui = SC.View.create();

MyApp.widget = SC.Widget.create({

    layout: { width: "50%", height: "50%", centerX: 0, centerY: 0 },

    mouseEntered: function(evt) {
        document.body.style.cursor = 'pointer';
    },

    mouseDown: function(evt) {
        alert("Welcome to Blossom!");
    },

    mouseExited: function(evt) {
        document.body.style.cursor = 'default';
    },

    render: function(ctx) {
        ctx.fillStyle = '#859900'; // green
        ctx.fillRect(0, 0, ctx.width, ctx.height);
    }

});

function main() {
    var app = SC.Application.create();
    MyApp.ui.get('layers').pushObject(MyApp.widget);
    app.set('ui', MyApp.ui);
}

<!--     Nothing goes here in a Blossom app. No HTML or CSS!

         The user interface is drawn entirely with the HTML 5 Canvas2D context.
         To learn more, please visit https://github.com/fohr/blossom, or find
         us on #blossom at irc.freenode.net

         Version with comments: http://jsfiddle.net/H3e7W/

         Blossom is based on SproutCore.                                    -->

/* Internal to Blossom. DO NOT MODIFY. */
* { -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box; }

div, canvas { border-style: solid; border-width: 0; }

#ui { border-style: none }