JSFiddle - React, Tailwind, and code Playground

by Abhijeet Kandalkar

CSS

<!DOCTYPE html>
<html lang="en" ng-app="kitchensink">
  <head>
    <title>Candy Crush Clone</title>

    <link rel="stylesheet" href="master.css">
    <link rel="stylesheet" href="prism.css">
    <style>
      pre { margin-left: 15px !important }
    </style>


    <script src="prism.js"></script>
    <script src="fabric.js"></script>
    <script src="master.js"></script>
  </head>
  <body onload="init()">



    <div id="bd-wrapper" ng-controller="CanvasControls">
      <h2>Candy Crush</h2>
      <canvas id="c" width="440" height="550" style="border:1px dotted #ccc"></canvas>
    </div>

<script id="main">
	function init() {
	  var canvas = this.__canvas = new fabric.Canvas('c');
	  //fabric.Object.prototype.transparentCorners = false;

	  canvas.on('mouse:over', function(e) {
		e.target.setStrokeWidth(5);
		e.target.setStroke('black');
		canvas.renderAll();
	  });

	  canvas.on('mouse:out', function(e) {
		e.target.setStrokeWidth(1);
		e.target.setStroke('#666');
		canvas.renderAll();
	  });
	  
	  this.__canvas.row = 5;
	  this.__canvas.coloumn = 4;
	  populateScreen();
	}
	
	function populateScreen()
	{
		// add random objects
	    for (var r = 0; r < this.__canvas.row; r++) {
		var dim = 50;
		var klass = 'Circle';
		var options = [];
		for (var c = 0; c < this.__canvas.coloumn; c++) {
		    var cIndex = fabric.util.getRandomInt(0,4) % 4;
		    var color = ['red', 'green', 'blue', 'yellow', 'black'][cIndex];
			options = {
			  top: r*110,
			  left: c*110,
			  fill: color,
			  hasControls : false,
			  hasBorders : false,
			  strokeWidth : 1,
			  stroke: '#666',
			};

			if (klass === 'Circle') {
			  options.radius = dim;
			}
			else {
			  options.width = dim;
			  options.height = dim;
			}
			this.__canvas.add(new fabric[klass](options));
		}
	  }
	}
</script>
    <script>
	/*
(function() {
  fabric.util.addListener(fabric.window, 'load', function() {
    var canvas = this.__canvas || this.canvas,
        canvases = this.__canvases ||...