FabricJS - Rotate Object via Variable Name on Button Click
Using a button click, rotate an object on the FabircJS Canvas that is specified by a variable.
HTML
<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.js"></script>
<script src="http://promincproductions.com/gaTrackingJSFiddle.js"></script>
<button id="rotate">Rotate Image 15°</button>
<canvas id="c" width="400" height="400"></canvas>
CSS
canvas{
border-width: 1pz;
border-style: solid;
border-color: #000;
}
JavaScript
var canvas = new fabric.Canvas('c');
var src = "http://fabricjs.com/lib/pug.jpg";
var rotateThisImage;
fabric.Image.fromURL(src, function(oImg) {
oImg.set({
width: 200,
height: 200,
originX: 'left',
originY: 'top'
});
canvas.add(oImg);
canvas.centerObject(oImg);
canvas.renderAll();
rotateThisImage = oImg;
});
$("#rotate").click(function(){
var curAngle = rotateThisImage.getAngle();
rotateThisImage.setAngle(curAngle+90);
canvas.renderAll();
});