Получить данные о цвете HTML5 Canvas

Question

Я хочу получить процентное содержание цвета в холсте HTML5. У меня есть холст, где вы можете рисовать линии в трех цветах с помощью мыши или чистить его белой линией.

Теперь я хочу получить процентное содержание цвета на всем холсте.

Я пытаюсь это:

var c = document.getElementById("can");
var ctx = c.getContext("2d");
var imgData = ctx.getImageData(0, 0, c.width, c.height);

var allPixel=0;
for (var i = 0; i < imgData.data.length; i += 4) {
 allPixel+=1;
  if(imgData.data[i+2]==255)
    blue+=1;
  else if (imgData.data[i]==255)
    red+=1;
  else if (imgData.data[i+1]==green)
    green +=1;
}

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

Вы можете мне помочь?

А как это возможно с другим цветом вместо полных цветов RGB, например, желтым или белым?

Спасибо!

Answer 1

Белый равен rgb(255,255,255), так что вы можете считать это синим. Также может быть проще пройти через все x и y и получить данные, где этот код получает данные ровно в один пиксель.

var col = ctx.getImageData(x,y,1,1).data
var red = col[0];
var green = col[1]; 
var blue = col[2];
// increment values