Tengo un área (en este caso, el área de la cocina con bordes amarillos), dentro de esta área hay otras formas (numeradas 1 y 2 de color azul claro) que dividen el área de la cocina en varias partes (A, B, C). Necesito calcular por separado el área de cada parte verde.

Uso un trabajador js para calcular el área de la zona azul y verde (en total). Pero necesito calcular de alguna manera estas zonas verdes divididas por separado. Para calcular el área, uso getImageData() donde obtengo píxeles de toda el área de la cocina. Luego hago un bucle en los píxeles y filtro. Dependiendo del color del píxel, lo agrego al resultado del área de la zona azul o verde.

¿Existen soluciones listas para usar en Fabric.js o Canvas para contar una parte de una zona en otra zona? Si no, ¿tienes alguna idea de cómo implementarlo?

Aquí hay una pequeña pieza de código con un ciclo de píxeles:

 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; }