Как удалить эффект наложения из изображения холста html при возникновении события

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

<input id = "selectedColor" type = "color" value = "#0000ff">
        <canvas id = "myDrawing" width = "530" height = "600">

var x; //drawing context
var width; // canvas width
var height; // canvas height
var fg; //image
var buffer; //inner canvas
var color = '#0000ff'; //default color
function shirtColor(){
  return color;
}
function updateShirtColor(){
  //update value of color
  var currentColor = document.getElementById('selectedColor').value;
  color = currentColor;
}
window.onload = function() {
  var myColor = document.getElementById('selectedColor');
  myColor.addEventListener('change',draw);

    var drawingCanvas = document.getElementById('myDrawing');
    // Check the element is in the DOM and the browser supports canvas
    if (drawingCanvas && drawingCanvas.getContext) {
        // Initaliase a 2-dimensional drawing context
        width = drawingCanvas.width;
        height = drawingCanvas.height;
        x = drawingCanvas.getContext('2d');


        // grey box grid for transparency testing
        x.fillStyle = shirtColor();
        x.fillRect(0,0,width,height);
        fg = new Image();
        fg.src = 'https://d1b2zzpxewkr9z.cloudfront.net/images/products/apparel/product_type_1_front.png';

        // create offscreen buffer,
        buffer = document.createElement('canvas');
        buffer.width = fg.width;
        buffer.height = fg.height;
        bx = buffer.getContext('2d');

        // fill offscreen buffer with the tint color
        bx.fillStyle = '#FF';
        bx.fillRect(0,0,buffer.width,buffer.height);

        // destination atop makes a result with an alpha channel identical to fg, but with all pixels retaining their original color *as far as I can tell*
        bx.globalCompositeOperation = "destination-atop";
        bx.drawImage(fg,0,0);


        // to tint the image, draw it first
        x.drawImage(fg,0,0);

        //then set the global alpha to the amound that you want to tint it, and draw the buffer directly on top of it.
        x.globalAlpha = 0.5;
        x=x.drawImage(buffer,0,0);
    }
}
function draw(){
  updateShirtColor();
  var drawingCanvas = document.getElementById('myDrawing');
  // Check the element is in the DOM and the browser supports canvas
  if (drawingCanvas && drawingCanvas.getContext) {
      // Initaliase a 2-dimensional drawing context
      width = drawingCanvas.width;
      height = drawingCanvas.height;
      x = drawingCanvas.getContext('2d');
      x.clearRect(0, 0,width,height);
      // grey box grid for transparency testing
      x.fillStyle = shirtColor();
      x.fillRect(0,0,width,height);

      fg = new Image();
      fg.src = 'https://d1b2zzpxewkr9z.cloudfront.net/images/products/apparel/product_type_1_front.png';

      // create offscreen buffer,
      buffer.width = fg.width;
      buffer.height = fg.height;
      bx = buffer.getContext('2d');

      // fill offscreen buffer with the tint color
      bx.clearRect(0, 0, buffer.width, buffer.height);
      bx.fillStyle = '#FF';
      bx.fillRect(0,0,buffer.width,buffer.height);

      // destination atop makes a result with an alpha channel identical to fg, but with all pixels retaining their original color *as far as I can tell*
      bx.globalCompositeOperation = "destination-atop";
      bx.drawImage(fg,0,0);


      // to tint the image, draw it first
      x.drawImage(fg,0,0);

      //then set the global alpha to the amound that you want to tint it, and draw the buffer directly on top of it.
      x.globalAlpha = 0.5;
      x=x.drawImage(buffer,0,0);
  }
}

Я ожидаю, что после изменения цвета будет четкое изображение без эффекта наложения.