Javascript 更改彩色图像，但不要'；不要改变画布后面的图像

我在画布上有两幅图像，如下所示：

您可以看到这是2图像透明 在画布上，它将显示如下

我只想给“汽车”换颜色。怎么做

我使用dataImage更改颜色，但它也更改了后面的图像

我的代码：

 context.drawImage(imageObj,this.top,this.left,this.width,this.height);

 var imgData=context.getImageData(this.top, this.left, this.width, this.height);
    dataImg=imgData.data;
    for (var i=0;i<dataImg.length;i+=4)
    {
      dataImg[i]= hexToRgb(this.color).r |dataImg[i+2];
      dataImg[i+1]=hexToRgb(this.color).g |dataImg[i+2];
      dataImg[i+2]=hexToRgb(this.color).b|dataImg[i+2];
      dataImg[i+3]= 255;
    }
    context.putImageData(imgData,this.top, this.left);

context.drawImage（imageObj，this.top，this.left，this.width，this.height）；
var imgData=context.getImageData（this.top、this.left、this.width、this.height）；
dataImg=imgData.data；
对于（var i=0；i，您需要在合成两幅图像之前更改图像颜色

context.drawImage(imageObj,this.top,this.left,this.width,this.height);

之后就不会了，比如：

//画背景

context.drawImage(img1, 0, 0);

context.clearRect(this.top,this.left,this.width,this.height));
 context.fillStyle = "#FF0000";
 context.fillRect(this.top,this.left,this.width,this.height));
 context.globalCompositeOperation = 'destination-atop';
 context.drawImage(img2, 0, 0);

//创建所需颜色的填充，将图像用作遮罩并添加到背景中

context.drawImage(img1, 0, 0);

context.clearRect(this.top,this.left,this.width,this.height));
 context.fillStyle = "#FF0000";
 context.fillRect(this.top,this.left,this.width,this.height));
 context.globalCompositeOperation = 'destination-atop';
 context.drawImage(img2, 0, 0);

我有一个列表图像将自动绘制。我不认为这种方式会工作，因为我需要知道什么图像将是“背景”当我选择一个图像改变颜色