JSFiddle - React, Tailwind, and code Playground

by Santiago J

HTML

<canvas></canvas>

CSS

canvas {
    background-color: #aaa;
}

JavaScript

var ctx = document.querySelector("canvas").getContext("2d");
ctx.canvas.width = 640, ctx.canvas.height = 480;

function draw(img, angle, dx, dy, scale) {
    ctx.setTransform(1,0,0,1,0,0);
    ctx.clearRect(0,0,ctx.canvas.width,ctx.canvas.height);
    /*
    ctx.translate(dx,dy);
    ctx.scale(scale, scale);
    ctx.rotate(angle);
    /*/
    var m1 = scale * Math.cos(angle);
    var m2 = scale * Math.sin(angle);
    ctx.setTransform(m1, m2, -m2, m1, dx, dy);
    //*/
    ctx.drawImage(img, -img.cx, -img.cy);
};

var img = new Image;
img.onload = function() {
    var angle = 0;
    img.cx = img.width / 2, img.cy = img.height / 2;
    
    setInterval(function() {
        draw(img, angle, 50, 50, 2);
        angle = (angle + 0.02) % (2*Math.PI);
    }, Math.round(1000/59));
};
img.src = "https://www.google.com/images/srpr/logo4w.png";