Thanks for all of the great feedback that you provided. The pendulum transition is in our SceneManager. The Transition part is made of a line and a circle that moves from left to right and then we draw a filled polygon that covers the existing scene. When the scene is covered we change the scene behind and then we move the line and circle back and the filled polygon is going back. You can view the code if you go into dev tools. have also added the exact part that you are interested here:
static DrawTransition(context) {
context.fillStyle = "#660066";
context.beginPath();
context.moveTo(0, 0);
if (SceneManager.ballX <= Game.Canvas.width / 2) {
// If pendulum is on left side of screen, fill only above the pendulum
context.lineTo(SceneManager.pivotX, 0);
context.lineTo(SceneManager.pivotX + Math.sin(SceneManager.theta) * 2 * SceneManager.L, SceneManager.pivotY + Math.cos(SceneManager.theta) * 2 * SceneManager.L);
context.lineTo(0, SceneManager.pivotY + Math.cos(SceneManager.theta) * 2 * SceneManager.L);
context.lineTo(0, 0);
} else {
context.lineTo(SceneManager.pivotX, 0);
context.lineTo(SceneManager.pivotX + Math.sin(SceneManager.theta) * 2 * SceneManager.L, SceneManager.pivotY + Math.cos(SceneManager.theta) * 2 * SceneManager.L);
context.lineTo(Game.Canvas.width, Game.Canvas.height);
context.lineTo(0, Game.Canvas.height);
context.lineTo(0, 0);
}
context.closePath();
context.fill();
// Draw pendulum
context.fillStyle = "#ff0066";
context.beginPath();
context.arc(SceneManager.ballX, SceneManager.ballY, SceneManager.ballRadius, 0, 2 * Math.PI);
context.fill();
context.strokeStyle = "#ff0066";
context.beginPath();
context.lineWidth = 5;
context.moveTo(SceneManager.pivotX, SceneManager.pivotY);
context.lineTo(SceneManager.ballX, SceneManager.ballY);
context.stroke();
}