JSFiddle - React, Tailwind, and code Playground

by marlanga

HTML

<canvas id="c"></canvas>
<button id="rotar">Rotar
</button>

CSS

canvas { background-color:#ddd; }

JavaScript

var canvas = document.getElementById('c');
var btn = document.getElementById('rotar');
canvas.width  = 400;
canvas.height = 300; 
var ctx = canvas.getContext('2d');

var Data = {
	clicked : false,
  rotation : 0
};

canvas.addEventListener('mousedown', function(e){
	Data.clicked = true;
});
canvas.addEventListener('mouseup', function(e){
	Data.clicked = false;
});
canvas.addEventListener('mouseout', function(e){
	Data.clicked = false;
});
canvas.addEventListener('mousemove', function(e){
	if (Data.clicked) {
  	var x = e.layerX * Math.cos(Data.rotation) - e.layerY * Math.sin(Data.rotation);
    var y = e.layerX * Math.sin(Data.rotation) + e.layerY * Math.cos(Data.rotation);
    ctx.fillStyle = "red";
    ctx.fillRect(x, y, 1, 1);
    ctx.fillStyle = "green";
    ctx.fillRect(e.layerX, e.layerY, 1, 1);
    console.log(x + ',' + y, e.layerX + ',' + e.layerY);
  };
}); 

btn.addEventListener('click', function(e){
	var rad = 25 * Math.PI / 180;
	ctx.rotate(rad);
  Data.rotation -= rad;
});