JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.3.0/handlebars.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ember.js/1.3.1/ember.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ember-data.js/1.0.0-beta.5/ember-data.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.css">
<body>
  <script type="text/x-handlebars" data-template-name="index">
        <div class="container">

            <div class="row">
                <div class="col-md-3">

                    <div id="newItem">

                        <div id="items">
                            <h4 style="text-align: center">Items</h4>
                            <table class="table">
                                <tbody>
                                    {{#each}}
                                    <tr class="table-striped">
                                        <td style="text-align: left">{{id}}</td>
                                        <td>{{width}} x {{height}}</td>
                                        <td>{{style}}</td>
                                        <td><button {{action 'load' width}}>Load</button></td>
                                    </tr>
                                    {{/each}}
                                </tbody>
                            </table>
                        </div>

                    </div>

                </div>
                <div class="col-md-9">
                    
                    <div id="canvas_div">
                        <div id="itemLocation">
                            {{testWidth}}
                        </div>
                        <div id="canvas_container">
                            {{view "App.CanvasView"}}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </script>
</body>

CSS

#canvas_div {
    width: 500px;
    height: 700px;
    border:1px dashed gray;

    position: absolute;
    margin: 0 0 0 -250px;
    left: 50%;
    top: 50%;
}

#canvas_container {
    width: 400px;
    height: 600px;


    /*Centering Method 2*/
    position: absolute;
    margin: -300px 0 0 -200px;
    left: 50%;
    top: 50%;
}

#itemLocation   {
    text-align: center;
    font-weight:bold;
}

#items  {
    border: 1px dashed gray;
    padding: 5px;
    margin-top:20px;
}

JavaScript

window.App = Ember.Application.create({

});

App.Store = DS.Store.extend({
});

App.ApplicationAdapter = DS.FixtureAdapter.extend({

});


//------------------------------
App.Router.map(function() {
    this.resource('index', { path: '/' });
});

// ... additional lines truncated for brevity ...
App.IndexRoute = Ember.Route.extend({
    model: function () {
        return this.store.find('item');
    }
});


//------------------------------
App.IndexController = Ember.ArrayController.extend({

    testWidth: '100',

    actions:  {
        load: function(width)    {
            this.set('testWidth', width);
        }
    }
});


App.CanvasView = Ember.View.extend({
    tagName: "canvas",
    attributeBindings: ['height', 'width'],
    height: 600,
    width: 400,

    didInsertElement: function(){
        this.drawItem();
    },
    
    widthChanged: function() {
        console.log('rerender');
        this.rerender();
    }.observes('controller.testWidth'),

    drawItem: function(){
        var canvas = Ember.get(this, 'element');
        var ctx = canvas.getContext("2d");

        // -- draw red rectangle --
        ctx.fillStyle='#00FF00';
        ctx.fillRect(200,0,80,100);

        
       // ?? how to update controller testWidth ??
        var rwidth = this.get("controller").get("testWidth"); 

        // -- draw dynamic green rectangle --
        ctx.fillStyle='#FF0000';
        ctx.fillRect(0,0,rwidth,100);

    }


});


//------------------------------
App.Item = DS.Model.extend({
    width: DS.attr('string'),
    height: DS.attr('string')
});



App.Item.FIXTURES = [
    {
        id: 1,
        width: '220',
        height: '340'
    },
    {
        id: 2,
        width: '100',
        height: '350'
    },
    {
        id: 3,
        width: '400',
        height: '100'
    }
];