title: javascript, replace specific colored area on image by other image
body: <p>I've been searching all over the web to resolve my problem, but I'm starting to think that I'm not searching in the right way. </p>
  
  <p>Let's say I have the image below, <strong>what I am trying to do, is to replace the blue area with an image that the user uploads</strong>, but I don't know how to do it. </p>
  
  <p>The closest I have found was <a href="https://stackoverflow.com/questions/16228048/replace-a-specific-color-by-another-in-an-image-sprite">this</a> but this is drawing a red rectangle where specific coordinates are being given, and what I need (I think) is to <strong>find/detect</strong> those coordinates and replace them with an image. 
  Has anyone ever came across this? can you point me in the right direction? really stuck here!</p>
  
  <p><a href="https://i.stack.imgur.com/rrGp5.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/rrGp5.jpg" alt="Dummy image"></a></p>
  
  <p>Note: the image I have put here is just for the purpose of the question, this is not my image.
  Thanks for your time, regards</p>
  
  <p><strong>EDIT:</strong></p>
  
  <p>Ok i should have putted the code here in the first place, for that my apologies, and as i said before, this an app that i´m doing using phonegap and jquery mobile, the app is using a navbar on the bottom, and one of the pages is called "preview" and this is where i need the image functionality to work, but i´m missing something, and i think is lack of knowledge:</p>
  
  <p><strong>My index.html:</strong> </p>
  
  <pre><code> &lt;div data-role="page" data-url="preview" id="preview"&gt;
        &lt;div data-role="header" style="background-color: rgb(182, 202, 51)" data-position="fixed"&gt;
          &lt;h1 id="titlePreview"&gt;PREVIEW&lt;/h1&gt;
          &lt;a href="#language" id="langBtn" style="width: 20px;height: 20px; background:none;  " href="#" data-icon="comment" data-iconpos="notext" class="ui-btn-left"&gt;&lt;/a&gt;
        &lt;/div&gt;
          &lt;div id="previewSaco" class="containerPreviewSaco"&gt;//if i remove this div, the navbar on the bottom disapears. 
            &lt;canvas id="myCanvas" width="200" height="200"&gt;//i´m testing with this size, but yes the image is supose to have a 100% with, in fact the image as 1940x2372. 
         &lt;/div&gt;
        &lt;div data-role="footer" data-position="fixed"&gt;
          &lt;div data-role="navbar" class="ui-bar"&gt;
            &lt;ul&gt;
              //in here i have my several "li" for navegation and i think it´s irrelevant for my question.
            &lt;/ul&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p><strong>My .js file:</strong></p>
  
  <pre><code>$(document).on("click", "#btnPreview", function (event) {
  
      var ctx = document.getElementById('myCanvas').getContext('2d');
  
      var img = new Image;
      img.onload = function(){
        ctx.drawImage(img,0,0);
        img2.src = 'img/capa.png'; 
      };
  
      var img2 = new Image;
      img2.onload = function(){
          ctx.globalCompositeOperation = 'destination-over';
  
        //ctx.scale(x, y);
        //ctx.rotate(angle);
        //ctx.translate(x, y);
  
        //or
  
        //ctx.transform(a, b, c, d, e, f);
  
        ctx.drawImage(img2,0,0);
      };
  
      var uri1 = 'img/previewSaco1.png'; //this is the main image, which is suppose to load when i click in the page "preview", **and it´s not happening** and i have create the transparent area to were the uploaded image by the user is also suppose to go.
  
      var uri2 = 'img/capa.png';//this image is a dummy logo to test in the bigger image
      img.src = uri1;
  });
  </code></pre>
  
  <p><strong>Note:</strong> when i run the app, the phonegap desktop is always saying this: undefined Content Security Policy has been modified to be: https://ssl.gstatic.com;style-src 'self' 'unsafe-inline' data: blob:;media-src *;img-src * 'self' data: content:;script-src * 'unsafe-inline' 'unsafe-eval' data: blob:;"></p>