title: Build google map marker using encoding 64 image
body: <p>I have the following fonction, that gets an image as parameter:  </p>
  
  <pre><code>function getIcon(img){
    var canvas = document.createElement("canvas");
    canvas.width = img.width;
    canvas.height = img.height;
    var ctx = canvas.getContext("2d");
    ctx.drawImage(img, 0, 0);
    var dataURL = canvas.toDataURL("image/png");
    return dataURL;
  }
  </code></pre>
  
  <p>for instance:  </p>
  
  <pre><code>icon = getIcon(document.getElementById("car_marker"));    
  </code></pre>
  
  <p>with:  </p>
  
  <pre><code>&lt;img id="car_marker" src="img/car.png"/&gt;
  </code></pre>
  
  <p>Then the icon created is used as a marker in Google Map:  </p>
  
  <pre><code>var marker = new google.maps.Marker({ position: latLng,
                                            map: map,
                                            title: description,
                                            id: id,
                                            icon: icon
                                         });
  </code></pre>
  
  <p>This part is working fine but I now need to modify the getIcon method so it takes another image as parameter and merge both images. As the new image I need to add is in base 64 encoding, the following does not work as expected:</p>
  
  <pre><code>function getIcon(img1, img2){
    var canvas = document.createElement("canvas");
    canvas.width = img1.width;
    canvas.height = img1.height;
    var ctx = canvas.getContext("2d");
    ctx.drawImage(img1, 0, 0);
    ctx.drawImage(img2, 0, 0); // add the base 64 encoded image here... does not work
    var dataURL = canvas.toDataURL("image/png");
    return dataURL;
  }
  </code></pre>
  
  <p>I end up with:  </p>
  
  <pre><code>Could not convert JavaScript argument arg 0 [nsIDOMCanvasRenderingContext2D.drawImage]
  </code></pre>