How do you rotate an HTML5 canvas around its center?

Use HTML5 canvas' rotate and translate methods in JavaScript:

function rotate() {
	
  // Clear the canvas
  context.clearRect(0, 0, canvasWidth, canvasHeight);
	
  // Move registration point to the center of the canvas
  context.translate(canvasWidth/2, canvasWidth/2);
	
  // Rotate 1 degree
  context.rotate(Math.PI / 180);
    
  // Move registration point back to the top left corner of canvas
  context.translate(-canvasWidth/2, -canvasWidth/2);
	
  context.fillStyle = "red";
  context.fillRect(canvasWidth/4, canvasWidth/4, canvasWidth/2, canvasHeight/4);
  context.fillStyle = "blue";
  context.fillRect(canvasWidth/4, canvasWidth/2, canvasWidth/2, canvasHeight/4);
}

setInterval(rotate, 100);