JSFiddle - React, Tailwind, and code Playground

by anubhabB

HTML

<button id="rotate">Rotate 15deg</button>
<canvas width="95" height="95" id="cnv"></canvas>
<canvas width="95" height="95" id="cnv"></canvas>

<canvas width="95" height="95" id="cnvSampl" hidden></canvas>

CSS

#cnv{
    border:1px solid #ccc
}

JavaScript

var cntx = document.getElementById('cnvSampl').getContext('2d');
cntx.fillStyle = '#fc0';
cntx.fillRect(0,0,95,95);
var canv = document.getElementById('cnv');
var ctx = canv.getContext('2d');
var img = new Image();
var imgW, imgH;
var translateX, translateY;
var axisFactor = 2;
var rot = 0;

function rotate(){
    rot++;
    //This is without resize
    translateX = imgW/axisFactor;
    translateY = imgH/axisFactor
    ctx.clearRect(0,0,imgW,imgH);
    ctx.save();
    ctx.translate(translateX,translateY);
    ctx.rotate(15*rot*0.0174532925);
    ctx.drawImage(img,-translateX,-translateY);
    ctx.restore();
}

function init(){
    img.onload = function(){
        imgW = img.width;
        imgH = img.height;
        ctx.drawImage(img,0,0,imgW,imgH);
    }
    img.src = document.getElementById('cnvSampl').toDataURL();
    document.getElementById('rotate').onclick = function(){
         rotate(); 
    };
}
init();