JSFiddle - React, Tailwind, and code Playground

by Abhisek DasGupta

HTML

<link rel="stylesheet" href="http://fabricjs.com/css/master.css">
<link rel="stylesheet" href="http://fabricjs.com/css/prism.css">
<script src="http://fabricjs.com/lib/prism.js"></script>
<script src="http://fabricjs.com/lib/fabric.js"></script>
<script src="http://fabricjs.com/js/master.js"></script>
<script src="http://fabricjs.com/lib/jquery.js"></script>
<script src="http://fabricjs.com/lib/bootstrap.js"></script>
<script src="http://fabricjs.com/js/paster.js"></script>
<link rel="stylesheet" href="http://fabricjs.com/css/bootstrap.css">
<link rel="stylesheet" href="http://fabricjs.com/css/kitchensink.css">
<script src="http://fabricjs.com/js/kitchensink/utils.js"></script>
<script src="http://fabricjs.com/js/kitchensink/app_config.js"></script>
<script src="http://fabricjs.com/js/kitchensink/controller.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
<script src="http://fonts.googleapis.com/css?family=Plaster"></script>
<script src="http://fonts.googleapis.com/css?family=Engagement"></script>

<html lang="en" ng-app="kitchensink">
 
  

    <title>Kitchensink | Fabric.js Demos</title>

  <body>
    



    <div id="bd-wrapper" ng-controller="CanvasControls">
      <h2><span>Fabric.js demos</span> &middot; Kitchensink</h2>



<div style="position:relative;width:704px;float:left;" id="canvas-wrapper">

  <div id="canvas-controls">
    <div id="complexity">
      Canvas complexity (number of paths):
      <strong>{[ canvas.complexity() ]}</strong>
    </div>

    <div id="canvas-background">
      <label for="canvas-background-picker">Canvas background:</label>
      <input type="color" bind-value-to="canvasBgColor">
    </div>
  </div>

  <canvas id="canvas" width="700" height="600"></canvas>

  <div id="color-opacity-controls" ng-show="canvas.getActiveObject()">

    <label for="opacity">Opacity: </label>
    <input value="100" type="range" bind-value-to="opacity">

    <label for="color"...

JavaScript

(function() {

  if (document.location.hostname === 'localhost') {
    var links = document.getElementById('header').getElementsByTagName('a');
    for (var i = 0, len = links.length; i < len; i++) {
      // very retarted fix but fuck it
      links[i].href = links[i].href.replace('fabricjs.com', 'localhost:4000');
    }
  }
  else {
    var s = document.createElement('script'), t = document.getElementsByTagName('script')[0];
    s.async = true;
    s.src = 'http://api.flattr.com/js/0.6/load.js?mode=auto';
    t.parentNode.insertBefore(s, t);

    !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
  }
})();


  (function() {

    if (document.location.hash !== '#zoom') return;

    function renderVieportBorders() {
      var ctx = canvas.getContext();

      ctx.save();

      ctx.fillStyle = 'rgba(0,0,0,0.1)';

      ctx.fillRect(
        canvas.viewportTransform[4],
        canvas.viewportTransform[5],
        canvas.getWidth() * canvas.getZoom(),
        canvas.getHeight() * canvas.getZoom());

      ctx.setLineDash([5, 5]);

      ctx.strokeRect(
        canvas.viewportTransform[4],
        canvas.viewportTransform[5],
        canvas.getWidth() * canvas.getZoom(),
        canvas.getHeight() * canvas.getZoom());

      // var viewport = canvas.getViewportCenter();
      //console.log(canvas.getZoom(), viewport.x, viewport.y);

      ctx.restore();
    }

    $(canvas.getElement().parentNode).on('wheel mousewheel', function(e) {

      // canvas.setZoom(canvas.getZoom() + e.originalEvent.wheelDelta / 300);

      var newZoom = canvas.getZoom() + e.originalEvent.wheelDelta / 300;
      canvas.zoomToPoint({ x: e.offsetX, y: e.offsetY }, newZoom);

      renderVieportBorders();

      return false;
    });

    var viewportLeft = 0,
        viewportTop = 0,
        mouseLeft,
       ...