JSFiddle - React, Tailwind, and code Playground

by helxsz

HTML

<script src="http://www.html5canvastutorials.com/libraries/three.min.js"></script>

  <body ng-app="Mainapp" >


    <div id="container" ng-controller="Main">
                <button class="btn btn-danger"  ng-click="cropImage()">
                        CropImage
                </button>        
        
    </div>


  </body>

JavaScript

// revolutions per second
      var angularSpeed = 0.2; 
      var lastTime = 0;
 
      // this function is executed on each animation frame
      function animate(){
        // update
        var time = (new Date()).getTime();
        var timeDiff = time - lastTime;
        var angleChange = angularSpeed * timeDiff * 2 * Math.PI / 1000;
        cube.rotation.y += angleChange;
        lastTime = time;
 
        // render
        renderer.render(scene, camera);
 
        // request new frame
        requestAnimationFrame(function(){
            animate();
        });
      }

      // renderer
      var renderer = new THREE.WebGLRenderer();
      renderer.setSize(window.innerWidth, window.innerHeight);
      renderer.domElement.id = 'world';      
      document.body.appendChild(renderer.domElement);
 
      // camera
      var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
      camera.position.z = 500;
 
      // scene
      var scene = new THREE.Scene();
                
      // cube
      var cube = new THREE.Mesh(new THREE.CubeGeometry(200, 200, 200), new THREE.MeshNormalMaterial());
      cube.overdraw = true;
      scene.add(cube);
 
      // start animation
      animate();




var angularT3 = angular.module('Mainapp', []);

angularT3.run(['$rootScope', '$location','$http', '$window', function ($rootScope, $location, $http, $window) {
    //$http.defaults.headers.post['x-csrf-token'] = $cookies['XSRF_TOKEN'];
       var canv = document.createElement('canvas');
       canv.id = 'snapshot';
       canv.width = window.innerWidth;
       canv.height = window.innerHeight;       
       document.body.appendChild(canv);

}]);

angularT3.controller('Main', function ($scope,$http) {
    $scope.cropImage = function (){
        console.log('crop image');

        var bgCanvas = document.getElementById('snapshot');
        var mainCanvas = document.getElementById('world');

        var bgContext =...