JSFiddle - React, Tailwind, and code Playground

centered rotate canvas angualar

by Andrew Pougher

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.js"></script>
          <div ng-controller="MyCtrl" class="container">
          {{title}}
        
          
          
          <span class="text-size-slider">
          <span class="small-letter small">A</span>
      <input type="range" value="0" min="0" max="360" id="set-value" ng-model="sliderModel" ng-change="rotateme(sliderModel)" class="slider"> <span class="big-letter">A</span>
        </span>
<br>
<canvas id="myCanvas" width="190" height="190" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>

<button class="btn btn-xs btn-info" ng-click="getSVGdata()">
show SVG Data
</button>

   </div>

CSS

.text-size-slider {
  line-height: 100%;
  font-size: 14px;
}

.text-size-slider .small-letter,
.text-size-slider .big-letter {
  font-weight: bold;
}

.text-size-slider .slider {
  -webkit-appearance: none;
  margin: 0 8px;
}

.text-size-slider .slider:focus {
  outline: none;
}

.text-size-slider .slider::-webkit-slider-thumb {
  border: none;
  cursor: pointer;
  -webkit-appearance: none;
  background-color: #c6c6c6;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  margin-top: -9px;
  position: relative;
  z-index: 2
}

.text-size-slider .slider::-webkit-slider-runnable-track {
  width: 100%;
  height: 2px;
  cursor: pointer;
  background: #c6c6c6;
  border: 0;
}

JavaScript

var app = angular.module('drewApp',[]);


app.controller('MyCtrl', function($scope) {
// SET TITLE
  $scope.title = "ROTATE ME";
  
  
  
  $scope.getSVGdata = function(){
  var svg =  $('#myCanvas').find('svg')[0]; //document.getElementById('myCanvas')[0];//$("#myCanvas").html();//
  alert(svg)
  };
  //DRAW STUFF

$scope.rotateme = function(val){
$scope.title = val;
var canvasWidth = 190,
    canvasHeight = 190,
	canvas,
	ctx;
  c = document.getElementById("myCanvas");
ctx = c.getContext("2d");
 // Clear the canvas
	ctx.clearRect(0, 0, canvasWidth, canvasHeight);
    // Move registration point to the center of the canvas
	ctx.translate(canvasWidth/2, canvasWidth/2);
    // Rotate 1 degree or add 3* etc
    var rotvalue = $scope.sliderModel || 180;
	ctx.rotate(3*Math.PI / rotvalue); // ctx.rotate(2 * Math.PI / rotvalue);
// Move registration point back to the top left corner of canvas
	ctx.translate(-canvasWidth/2, -canvasWidth/2);
	ctx.fillStyle = "red";
ctx.fillRect(canvasWidth/4, canvasWidth/4, canvasWidth/2, canvasHeight/2);
var img = new Image();
img.onload = function() {
ctx.drawImage(img, canvasWidth/4, canvasWidth/4);
}
img.src = "http://brandoral.com/icons-svg/bo-icn-1.svg";
//	ctx.fillStyle = "red";
	//ctx.fillRect(canvasWidth/4, canvasWidth/4, canvasWidth/2, canvasHeight/4);
};
   $scope.rotateme();


});