CODEWITHSUNDEEP
javascripthtmlcsscanvasopacity
Benjamin Winks
Benjamin Winks

Reputation: 23

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 the bounds of the rectangular divs that I had drawn on the image to re-draw on the canvas.

The problem arises when I have multiple rectangles because the opacity decreases on each subsequent rectangle due to the fact that they are being layered, as such: `

    function drawRectangleToCanvas(left, top, width, height, canvas, context, opacity) { 

    context.globalCompositeOperation='destination-over';
    context.strokeStyle = 'rgba(0,255,130,0.7)';
    context.fillStyle = 'rgba(0,0,255,'+opacity+')';
    context.rect(left, top, width, height);
    context.setLineDash([2,1]);
    context.lineWidth = 2;
    context.fill();
    context.stroke();

    }

From my understanding, the context.globalCompositeOperation='destination-over' causes the rectangles to be placed onto the image like slices of bread. With each rectangle that is drawn on the div, the opacities overlap, causing the opacity to increase by a factor of, in this case, 0.1. This is what the issue looks like: Canvas with layered rectangles and opacity problems.

How can I just add all the rectangles without this opacity issue? I call this method for each and every rectangle that I have, so I didn't know if I could put all the rectangles in an array or what. Any suggestions to fix this would be helpful.

EDIT: The darkest rectangle is the first one to be drawn, just to add some information.

Upvotes: 0

Views: 198

Answers (1)

Blindman67
Blindman67

Reputation: 54089

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 together
    function drawRectangleToCanvas(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

Upvotes: 2

Related Questions