Layering Rectangles On A Canvas Causes Opacity To Increase

I am making annotations on images using a jpeg image and rectangles that I am drawing onto the image. I can then transfer the image to a canvas, and, using a for-loop, I can grab t

Solution 1:

Not completely sure what you want but you can leave out the calls to the stroke and fill methods until you have defined all the rectangles.

// Not much left to do in the function but just here to illustrate// that creating the rectangles should be put togetherfunctiondrawRectangleToCanvas(left, top, width, height, canvas, context){ 
        context.rect(left, top, width, height);
    }

    context.globalCompositeOperation='destination-over';
    context.strokeStyle = 'rgba(0,255,130,0.7)';
    context.fillStyle = 'rgba(0,0,255,'+opacity+')';
    context.setLineDash([2,1]);
    context.lineWidth = 2;
    context.beginPath();
    while(??? ){
        // loop and define all the rectangles drawRectangleToCanvas(...  //
    }
    // once all the rectangles are defined // call the fill and stroke to render them
    context.fill();
    context.stroke();

This will stop them compounding the alpha values