Basic use of requestAnimationFrame for animation

Question

I'm creating this code in which there are two rectangles: the red one is the fixed square. The cyan rectangle should rotate over the red one. The rotation angle should be variable using requestAnimationFrame. So, what I want is that angle is varying between 0 and 360. How can I do that?

This is my code:

const canvas = document.getElementById("canvas")
const ctx = canvas.getContext('2d')

const width = canvas.width
const height = canvas.height

const backgroundColor = '#c35033'
const overlayColor = '#bcddda'

fillStyle = backgroundColor

fillRectangle(ctx, backgroundColor, 0, 0, width, height)

const angle = Math.PI
fillSemiTransparentOverlay(angle, width, overlayColor)
// window.requestAnimationFrame(step)

function fillSemiTransparentOverlay(angle, width, overlayColor) {
  ctx.save()
  ctx.translate(width / 2, width / 2)
  ctx.rotate(angle)
  ctx.translate(-width / 2, -width / 2)
  ctx.fillStyle = overlayColor
  ctx.fillRect(-width * (3 / 2), -width / 2, width * 2, width * 2)
  ctx.restore()
}

function fillRectangle(context, color, x, y, width, height) {
  context.fillStyle = color
  context.fillRect(x, y, width, height)
}

<canvas id="canvas" width="500" height="500" />

Answer 1

I've added to your code a function step: You need to clear the canvas. You can do it by using clearRect. In this example instead of clearRect I'm repainting the background Next you need to increase the angle: angle+= .01; For a different speed use a different increment. Finally you paint again the overlay.

I hope it helps.

function step(){
  //use requestAnimationFrame with the step function as a callback
  window.requestAnimationFrame(step);
  //fill the background
  fillRectangle(ctx, backgroundColor, 0, 0, width, height);
  //increase the angle
  angle+= .01;
  //paint the overlay
  fillSemiTransparentOverlay(angle, width, overlayColor)
}

//call the function step()
step()

const canvas = document.getElementById("canvas")
const ctx = canvas.getContext('2d')

const width = canvas.width
const height = canvas.height

const backgroundColor = '#c35033'
const overlayColor = '#bcddda'

fillStyle = backgroundColor

fillRectangle(ctx, backgroundColor, 0, 0, width, height)

let angle = Math.PI
fillSemiTransparentOverlay(angle, width, overlayColor)


///////////////////////////
function step(){
//use requestAnimationFrame with the step function as a callback
  window.requestAnimationFrame(step);
  //fill the background
  fillRectangle(ctx, backgroundColor, 0, 0, width, height);
  //increase the angle
  angle+= .01;
  //paint the overlay
  fillSemiTransparentOverlay(angle, width, overlayColor)
}
step()
/////////////////////////

function fillSemiTransparentOverlay(angle, width, overlayColor) {
  ctx.save()
  ctx.translate(width / 2, width / 2)
  ctx.rotate(angle)
  ctx.translate(-width / 2, -width / 2)
  ctx.fillStyle = overlayColor
  ctx.fillRect(-width * (3 / 2), -width / 2, width * 2, width * 2)
  ctx.restore()
}

function fillRectangle(context, color, x, y, width, height) {
  context.fillStyle = color
  context.fillRect(x, y, width, height)
}

<canvas id="canvas" width="500" height="500" />