I have an area (in this case, the Kitchen area with yellow borders), inside this area there are other shapes (numbered 1 and 2 light blue color) that divide the kitchen area into several parts (A, B, C). I need to calculate separately the area of each Green part.

I use a js worker to calculate the area of the blue and green zone(in total). But I need to somehow calculate these divided green zones separately. To calculate area I use getImageData() where I get pixels of the entire kitchen area. Then I loop the pixels and filter. Depending on the color of the pixel, I add it to the area result of either the blue or green zone.

Are there ready-made solutions in Fabric.js or Canvas for counting a part of a zone in another zone? If not, do you have any ideas how to implement it?

Here is a small piece of code with a pixel cycle:

calculateCoverage: function (options) {
    options.oversampling = options.oversampling || 1;

    var result = {},
        pixel = new app.Color(),
        oversamplingArea = Math.pow(options.oversampling, 2),
        pixelCoverage, value,
        i;

    for (i = 0; options.imageData && i < options.imageData.data.length; i += 4) {
        pixel.x = options.imageData.data[i];
        pixel.y = options.imageData.data[i + 1];
        pixel.z = options.imageData.data[i + 2];
        pixel.a = options.imageData.data[i + 3];

        // Apply binary filtering to the pixel value.
        pixel.filter(app.Color.BinaryFilter).filter(app.Color.BinaryFilterAlpha);

        // Ignore low alpha pixels.
        if (!pixel.a) {
            continue;
        }
        pixelCoverage = this.getPixelCoverageType(pixel, options.types);
        value = pixel.a / 255 / oversamplingArea;

        if (!result[pixelCoverage]) {
            result[pixelCoverage] = 0;
        }
        // Iterate pixel coverage data.
        result[pixelCoverage] += value;
    }
    return result;
}