title: How to modify an image with canvas
body: <p>In my html I have an image already loaded:</p>
  
  <pre><code>&lt;img usemap="#prototypeMap" src="../../projects/tcas/TCAS display.jpg" style="z-index: 2;"&gt;
  </code></pre>
  
  <p>Is it possibile create a canvas to modify that image, by javascript?
  For example drawing a line in it, changing colours in it (for some pixels) and so on...</p>
  
  <p>EDIT:</p>
  
  <p>I have found a method on Internet but it doesn't works good for me:</p>
  
  <pre><code>var imgElement = document.getElementById('prototypeMap');
  
  var canvas = document.createElement("canvas");
  canvas.width = imgElement.offsetWidth;
  canvas.height = imgElement.offsetHeight;
  var ctx = canvas.getContext("2d");
  ctx.drawImage(imgElement,0,0); //ERROR
  </code></pre>
  
  <p>The last line give me this error:
  TypeError: Value could not be converted to any of: HTMLImageElement, HTMLCanvasElement, HTMLVideoElement.</p>