Слоистые прямоугольники на холсте Причины непрозрачности для увеличения

Question

Я делаю аннотации изображений, используя изображение jpeg и прямоугольники, которые я рисую на изображении. Затем я могу передать изображение на холст, и, используя for-loop, я могу захватить границы прямоугольных div, которые я нарисовал на изображении, чтобы повторно рисовать на холсте.

Проблема возникает тогда, когда у меня есть несколько прямоугольников, так как непрозрачность уменьшается на каждый последующий прямоугольник из-за того, что они наслоится, как таковой: `

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(); 

    } 

Из моего понимания, context.globalCompositeOperation='destination-over' вызывает прямоугольники для размещения на изображении, как кусочки хлеба. С каждым прямоугольником, который нарисован на div, непрозрачность перекрывается, в результате чего непрозрачность увеличивается в 1 раз, в этом случае 0,1. Вот как выглядит вопрос: Canvas with layered rectangles and opacity problems.

Как я могу просто добавить все прямоугольники без этой непрозрачности? Я вызываю этот метод для каждого прямоугольника, который у меня есть, поэтому я не знал, могу ли я поместить все прямоугольники в массив или что-то еще. Любые предложения по исправлению этого будут полезны.

EDIT: Самый темный прямоугольник - первый, который нужно нарисовать, просто чтобы добавить некоторую информацию.

Answer 1

Не совсем уверен, что вы хотите, но вы можете отказаться от вызовов методов stroke и fill, пока не определите все прямоугольники.

// 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(); 

Это остановит их компаундирования альфа значения