JS: как точно посчитать пиксели?

Question

[Millerish]

Помогите точно посчитать количество пикселей. Я использую библиотеку fabricjs и мне нужно иметь возможность получать общую площадь(любых сочетаний фигур).

Для решения этой задачи я считаю пиксели на canvas:

function aaa() {
    var myConvasPosion = myConvas.getBoundingClientRect();
    var count = 0;
    for(var i = myConvasPosion.left; i < myConvasPosion.left + myConvasPosion.width; i++){
         for(var j = myConvasPosion.top; j < myConvasPosion.top + myConvasPosion.bottom; j++){
            var c = canvas.getContext('2d');
            var p = c.getImageData(i, j, 1, 1).data;
            if(p[0] == 236 && p[1] == 205 && p[2] == 174){
                count = count + 1;
            }
         }
    }
   console.log(count);
}

Но постоянно неточные размеры, расхождение примерно -+ 1/20.

Баг на видео
Ссылка на калькулятор

Как получить более точное значение?

Comments

[Александр Коротаев]

Считать попиксельно никогда не будет точно, потому при рисовании примитивов используется субпиксельный рендеринг, результатом которого по краям выходит неточный цвет из-за смешивания с фоном (визуального сглаживания).

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

Тут поможет только геометрия.