JSFiddle - React, Tailwind, and code Playground

by rckd

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
<div ng-app='app'>
  <app></app>
</div>

JavaScript

console.clear();
angular.module('app', [])

.component('app', {
	template: `
  	<ng-canvas on-init='$ctrl.initCanvas'></ng-canvas>
  `,
  controller: function(){
  	this.canvas = null;
    this.initCanvas = function(canvas){
      var context = canvas.getContext('2d');
      var centerX = canvas.width / 2;
      var centerY = canvas.height / 2;
      var radius = 70;

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

.component('ngCanvas', {
	template: `<canvas></canvas>`,
  bindings:{
  	onInit: '='
  },
  controller: function($element){
  	this.$onInit = function(){
    	this.onInit($element.find('canvas')[0]);
    };
  }
})