How to prevent the alpha-values to add together on html canvas

If I set globalAlpha=0.5 and draw two rectangles that overlap, the overlapping area will be totally opaque:

image of two overlapping rectangles

Is there any way to prevent this behaviour? I just want everything to have an alpha value of 0.5. So the overlapping area should be of the same color and transparency as the rest.

I already tried to play around with globalCompositeOperation but it did not solve my problem.