Как ctx.drawImage (), включая предыдущие изменения imageData?

Question

Мне нужно раскрасить части изображения, а затем склеить их. В настоящее время я могу выполнять каждый шаг только по отдельности, но как я могу склеить раскрашенные части вместе?

текущий код (сократить)

image.onload = () => {
            ctx.drawImage(image, 0, 0, canvas.width, canvas.height); // just for debugging purposes
            const pixelData = ctx.getImageData(0, 0, canvas.width, canvas.height);

            // body
            for (let y = 0; y < 25; y++) { // changing colors on pixels
                for (let x = 0; x < 120; x++) {
                    const index = (x + y * canvas.width) * 4;

                    pixelData.data[index + 0] = pixelData.data[index + 0] - pixelData.data[index + 0] * 0.6 + bodyColor[0];
                    pixelData.data[index + 1] = pixelData.data[index + 1] - pixelData.data[index + 1] * 0.6 + bodyColor[1] * 0.38;
                    pixelData.data[index + 2] = pixelData.data[index + 2] - pixelData.data[index + 2] * 0.6 + bodyColor[2] * 0.21;
                }
            }

            ctx.putImageData(pixelData, 0, 0);
            ctx.save();

            // getting the part of the image
            ctx.drawImage(image, 0, 0, 96, 96, 16 * this.scale, 0 * this.scale, 64 * this.scale, 64 * this.scale);      // body

            ctx.save();
            ctx.restore();
        };

        image.src = 'data:image/png;base64,' + skin;
        return canvas;
    }

Вот что он должен делать:

1. получить данные изображения
2. раскрасить определенную c часть
3. отобразить эту часть раскрашенной и масштабированной