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. 

Let's say I have the image below, **what I am trying to do, is to replace the blue area with an image that the user uploads**, but I don't know how to do it. 

The closest I have found was [this](https://stackoverflow.com/questions/16228048/replace-a-specific-color-by-another-in-an-image-sprite) but this is drawing a red rectangle where specific coordinates are being given, and what I need (I think) is to **find/detect** 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!

[![Dummy image](https://i.stack.imgur.com/rrGp5.jpg)](https://i.stack.imgur.com/rrGp5.jpg)

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

**EDIT:**

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:

**My index.html:** 

```
 <div data-role="page" data-url="preview" id="preview">
      <div data-role="header" style="background-color: rgb(182, 202, 51)" data-position="fixed">
        <h1 id="titlePreview">PREVIEW</h1>
        <a href="#language" id="langBtn" style="width: 20px;height: 20px; background:none;  " href="#" data-icon="comment" data-iconpos="notext" class="ui-btn-left"></a>
      </div>
        <div id="previewSaco" class="containerPreviewSaco">//if i remove this div, the navbar on the bottom disapears. 
          <canvas id="myCanvas" width="200" height="200">//i´m testing with this size, but yes the image is supose to have a 100% with, in fact the image as 1940x2372. 
       </div>
      <div data-role="footer" data-position="fixed">
        <div data-role="navbar" class="ui-bar">
          <ul>
            //in here i have my several "li" for navegation and i think it´s irrelevant for my question.
          </ul>
        </div>
      </div>
    </div>

```

**My .js file:**

```
$(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;
});

```

**Note:** 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:;">