JSFiddle - React, Tailwind, and code Playground

by mishragaurav31

HTML

<script src="http://makemydesign.com/demo/js/js/kc-rotate.js"></script>
<canvas id="c" width="250" height="400"></canvas><br>
<button id="button">Rotate now</button>

JavaScript

// canvas
var canvas = new fabric.Canvas('c');
canvas.backgroundColor = "green";

// text
var text = new fabric.Text('Text inside canvas', { 
                           left: 20, 
                           top: 50 
                           });
text.hasRotatingPoint = true;
canvas.add(text);


// circle
var DashrectH = new fabric.Rect({
                           fill: 'blue',
                           width: canvas.width,
                           height: 45,
                           stroke: 'red',
                           strokeWidth:3,
                           top:canvas.height-50,   
                           }); 
canvas.add(DashrectH);
var canvastorotate=document.getElementById("c");

            var degrees=0;
			button.onclick=function(){
                var heightnewc=canvas.height;
                var widthnewc=canvas.width;
                canvas.setHeight(widthnewc);
                canvas.setWidth(heightnewc);
                
                if(degrees==0){
                    canvas.forEachObject(function(o) {
                                     o.set('angle', 90);
                                     });
                    degrees=90;
                    console.log('90');
               
                }
                else{
                    canvas.forEachObject(function(o) {
                                         o.set('angle', 0);
                                         });
                    degrees=0;
                    console.log('0');
                }
                 canvas.renderAll();
			}