I'm working with a customHTML section, currently I'm using a canvas html5 element. Now, I need to display an image, but not sure if it will be a good idea to draw it in this canvas element or use a <img> html element directly.

My first approach is this:

a)

 var customHTML = <canvas id='viewport'></canvas>

 var canvas = document.getElementById('viewport'),

 context = canvas.getContext('2d');



 make_base();



 function make_base()

 {

   base_image = new Image();

   base_image.src = 'img/base.png';

   base_image.onload = function(){

   context.drawImage(base_image, 100, 100);

 }

Second approach:

b)

 var customHTML = <img src='../images/myicons/pin.png'>

I would like to know if there is any advantage in using this canvas and drawing logic, instead of using directly an <img> html element. Performance? Resources?

Please, let me know if a) or b) is the best approach.

I want to use this customHTML element as a pushpin in Bing Maps.

Any help will be appreciated.