etereo-example-canvas-0.js

const canvas = document.getElementById('canvas');
const context = canvas.getContext('2d');

function drawSquare(x, y, size, angleOfRotation) {
  // Translate in the context the origin of coordinates
  context.translate(x, y);

  // Rotate the context 
  const radians = Utils.degreeToRadian(angleOfRotation)
  context.rotate(radians);
  
  // Draw a square
  context.beginPath();
  context.rect(-Math.round(size/2), -Math.round(size/2), size, size);
  context.stroke();
  context.fillStyle = 'green';
  context.fill();

  // Paint a text indicating the degree of rotation 
  // (at 0, 0 because we have translate the coordinates origin)
  context.fillStyle = 'black';
  context.fillText(angleOfRotation, 0 , 0 );
}

function maximizeCanvas() {
  canvas.width = window.innerWidth
  canvas.height = window.innerHeight
}


function render() {
  maximizeCanvas()
  drawSquare(100, 100, 100 ,10)
}

render();