JSFiddle - React, Tailwind, and code Playground

by rlivsey

HTML

<script src="http://builds.emberjs.com/handlebars-1.0.0.js"></script>
<script src="http://builds.emberjs.com/canary/ember.js"></script>
<script type="text/x-handlebars" data-template-name="application">
    Component without a template:
       {{green-circle size=100}}
</script>

JavaScript

App = Ember.Application.create();

App.GreenCircleComponent = Ember.Component.extend({
    tagName: "canvas",
    
    attributeBindings: ["size:width", "size:height"],
    
    size: 10,
    
    drawCircle: function(){
    
      var canvas = this.get("element");
      var context = canvas.getContext('2d');
      var centerX = canvas.width / 2;
      var centerY = canvas.height / 2;
      var radius  = this.get("size") / 2;

      context.beginPath();
      context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
      context.fillStyle = 'green';
      context.fill();
  
    }.on("didInsertElement")
});