Question

I have a custom image control that gets rendered like this

<img id="2344324_Img" />

I am accessing this image in my HTML 5 canvas object like this:

var imgOne = new Image();
imgOne = document.getElementById('2344324_Img');
imgOne.onload = function() {
  // ..some code

  canvas.drawImage(this, 20, 20);
};

Is this the right way?

Answer 1

If you already have the <img> tag in your markup and intend to access it with getElementById(), there is no need to call new Image():

<img id="2344324_Img"/>

<script type='text/javascript'>
// Don't need this...
//var imgOne = new Image();

// Instead just do:
var imgOne = document.getElementById('2344324_Img');
imgOne.onload = function() {
  ..some code
  canvas.drawImage(this, 20, 20);

  // Should be accessible either via `this` or `imgOne`
  //canvas.drawImage(imgOne, 20, 20);
}
</script>