Question

I have a canvas element and I need to add images dynamically.

function draw(){
var ctx = document.getElementById('myCanvas').getContext('2d');
ctx.drawImage("img/image1.jpg",0,0,200,200);
}

The html code is the next:

<div id="divCanvas">
        <canvas id="myCanvas" width="322px" height="450px">Canvas not suported</canvas>
</div>

Answer 1

Something like this?

Live Demo

var startX = 0,
    startY = 0;

$('#clicker').click(function(){
    draw($('#testImage'));
});

function draw(image){
    image = image.get(0);
    var ctx = document.getElementById('myCanvas').getContext('2d');
    ctx.drawImage(image,startX,startY,20,20);
    startY+=20;
}

Used jQuery because you have it tagged as such. Not sure what issue your running into exactly, but to get the actual DOM element to draw onto the canvas you have to use .get().