Is there a way to disable color mixing/overlapping in html canvas

I have a canvas and when i draw 2 things overlapping with low opacity, the opacity gets higher in the part where they are overlapping. Is there a way to make it all the same opacity even if 2 things are overlapping.

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

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

ctx.fillStyle = "rgba(0, 0, 255, 0.2)";

ctx.fillRect(10, 10, 50, 50);
ctx.fillRect(20, 20, 50, 60);
ctx.fillRect(40, 5, 50, 40)

canvas {
  width: 100vw;
  height: 100vh;
}

<p>all of it should be the same color but the overlapping parts are darker</p>
<canvas id="canvas"></canvas>