title: Draw Icon on canvas image
body: <p>I have the following code that load image into my canvas:</p>
  
  <pre><code>&lt;html&gt;
  &lt;body&gt;
  &lt;canvas id="myCanvas" width="900" height="900"&gt;&lt;/canvas&gt;
  &lt;script&gt;
    var canvas = document.getElementById('myCanvas');
    var context = canvas.getContext('2d');
    var imageObj = new Image();
  
    imageObj.onload = function() {
      context.drawImage(imageObj, 0, 0);
  
    };
    imageObj.src = 'Map.png';
  
    var canvas = document.getElementById("myCanvas");
    var canvasWidth = canvas.width;
    var canvasHeight = canvas.height;
    var ctx = canvas.getContext("2d");
    var canvasData = ctx.getImageData(0, 0, canvasWidth, canvasHeight);  
  &lt;/script&gt;
  </code></pre>
  
  <p>
  </p>
  
  <p>I know how to draw a dot, But I want to know how to draw my marker (example green icon) on x,y on the image, how can i do that?</p>
  
  <p>I have image with my marker, I just want to draw my image marker on my image map.</p>
  
  <p>Thanks.</p>