JSFiddle - React, Tailwind, and code Playground

by skane

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>Use buttons to change line density</p>
    <button {{action "upLineCount"}}>Increase</button>
    <button {{action "downLineCount"}}>Decrease</button>
    {{ controller.appVars.lineCount }}
    {{ view "App.CompositeView" contentBinding="appVars"}}
</script>

CSS

div {
    position: relative;
}
canvas {
    opacity: .5;
    position: absolute;
}

CoffeeScript

window.App = Em.Application.create()

App.ApplicationController = Ember.Controller.extend
    appVars: Ember.Object.create
        height: 1080
        width: 1920
        lineCount: 32

     upLineCount: () ->
        if @get("appVars.lineCount") <=9
            @incrementProperty "appVars.lineCount"
        else
            @set "appVars.lineCount", 10
     downLineCount: () ->
        if @get("appVars.lineCount") >=1
            @decrementProperty "appVars.lineCount"
        else
            @set "appVars.lineCount", 0

App.Canvas = Ember.View.extend
    tagName: "canvas"
    contentBinding: "parentView.content"
    attributeBindings: ['height', 'width']
    height: (->
        @get "content.height"
    ).property('content.height')
    width: (->
        @get "content.width"
    ).property('content.width')
    isVertical: true
    
    layoutChanged: (->
        @fill()
    ).observes('content.lineCount', 'content.height', 'content.width')
    
    didInsertElement: ()->
        @_super()
        @fill()
    
    fill: () ->
        isVertical = @get "isVertical"
        lineCount = @get "content.lineCount"
        el = @get "element"
        height = @get "content.height"
        width = @get "content.width"
        color1 = @get "color1"
        color2 =@get "color2"
        if el
            ctx = el.getContext "2d"
            for lineNum in [1..lineCount]
                color = if lineNum%2 is 0 then color2 else color1
                @drawRect ctx, color, lineNum, lineCount, isVertical, height, width
    #helper method that draws each uniquely-colored box
    drawRect: (ctx, color, lineNum, lineCount, isVertical, height, width) ->
        if isVertical
            rHeight = height
            rStartY = 0
            rWidth = width/lineCount
            rStartX = width/lineCount * (lineNum-1)
         else 
            rHeight = height/lineCount
            rStartY = height/lineCount * (lineNum-1)
            rWidth = width
            rStartX = 0
      ...