javascript - How to load image into canvas on link click -

i have multiple links img src. want load each image canvas when each link clicked. it's not work. here's script:

js

var startx = 0,     starty = 0;  $('.imglink').click(function(){     draw($('href')); });  function draw(image){     image = image.get(0);     var ctx = document.getelementbyid('mycanvas').getcontext('2d');     ctx.drawimage(image,startx,starty,20,20);     starty+=20; } 

html

        <canvas id="mycanvas"></canvas> <hr />     <a href="http://www.avatarsdb.com/avatars/blue_eyed_tiger.jpg" class="imglink">1</a>     <a href="www.tiger-explorer.com/avatars/tiger%20theme/tiger006.jpg" class="imglink">2</a>     <a href="http://www.tiger-explorer.com/avatars_uploaded/avatar_522_1369588658.gif" class="imglink">3</a>     <a href="www.avatarsdb.com/avatars/angry_tiger.gif" class="imglink">4</a>     <a href="http://www.teesnthings.com/productimages/animal/wildlife-t-shirts/tiger-t-shirts/striking-tiger-t-shirt.jpg" class="imglink">5</a> 

here jsfiddle

three problems:

1. make sure of links have 'http://' in href
2. make sure selector appropriate
3. you have load image javascript object in order dynamically use it
4. you have prevent default method of link, otherwise, opens link image

to correct #2, change line:

draw($('href'));

into:

draw($(this).attr('href'));

this select href property wish draw canvas based on specific link clicked

to correct #3, can add following changes:

    var startx = 0,         starty = 0;      $('.imglink').click(function(e){         e.preventdefault();         draw($(this).attr('href'));     });      function draw(image){         var newimg = new image;         newimg.onload = function() {         var ctx = document.getelementbyid('mycanvas').getcontext('2d');         ctx.drawimage(newimg,startx,starty,20,20);         starty+=20;           }         newimg.src = image;       }