JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://raw.github.com/wycats/handlebars.js/1.0.rc.2/dist/handlebars.js"></script>
<script src="https://raw.github.com/emberjs/ember.js/release-builds/ember-1.0.0-pre.4.js"></script>
<script type="text/x-handlebars">
    <p>test</p>
    {{view "App.Canvas"}}
</script>

CSS

canvas {
    border: 4px solid black;
}

CoffeeScript

window.App = Em.Application.create();

App.Canvas = Em.View.extend
    #attrs for canvas element
    tagName: "canvas"
    attributeBindings: ['height', 'width']
    height: 300
    width: 300
    #attrs used to draw on canvas element
    color1: "blue"
    color2: "orange"
    
    #method called when this view's element is inserted into DOM
    didInsertElement: () ->
        @_super()
        @fill()
        
    #our canvas-api-based draw method
    fill: () ->
        #local variables
        halfHeight = @get("height") / 2
        width = @get "width"
        c1 = @get "color1"
        c2 = @get "color2"
        el = @get "element"
        
        #canvas drawing api calls
        ctx = el.getContext "2d"
        ctx.fillStyle = c1
        ctx.fillRect 0, 0, width, halfHeight
        ctx.fillStyle = c2
        ctx.fillRect 0, halfHeight, width, halfHeight
     
    #click event handler for toggling colors    
    click: () ->
        c1 = @get "color1"
        c2 = @get "color2"
        @set "color1", c2
        @set "color2", c1
        @fill()