title: how to change the color of an image in a HTML5 Canvas without changing its pattern
body: <p>I want to change the background color of this image while keeping the form, the effects and the contour of 
  <a href="https://i.stack.imgur.com/Kk1qd.png" rel="noreferrer">the image</a>.</p>
  
  <pre><code>&lt;canvas id="canvas01" width="1200" height="800"&gt;&lt;/canvas&gt;
  &lt;script&gt;
      function drawImage(imageObj,x, y, width, height){
          var canvas = document.getElementById('canvas01');
          var context = canvas.getContext('2d');
          context.drawImage(imageObj, x, y, width, height);
      }
      var image = new Image();
      image.onload = function(){
          drawImage(this, 400, 100, 320, 450);
      };
      image.src ="images/658FFBC6.png";
  &lt;/script&gt;
  </code></pre>