Usando botão para ativar o desenho no Canvas

[jsmoraes]

Image to use:


Canvas to fill:
Your browser does not support the HTML5 canvas tag.

Try it   Reset

nota: o gif perde sua animação. O botão não está incluído em tag form.
Uma imagem foi incluída na página, a outra está sendo carregada de URL.
Devido a variável 'a' para new Image estar sendo utilizada na mensagem acima temos que usar outra neste código.

Código fonte:

Image to use:
<img id="scream" src="http://jsmastronomy.30143.n7.nabble.com/file/n592/confused06.gif" alt="The Scream" width="25" height="25">

Canvas to fill:
<nabble_embed><canvas id="myCanvas" width="150" height="50"
style="border:1px solid #d3d3d3;"></canvas>

<p><button onclick="myCanvas()">Try it</button> &nbsp;&nbsp;<button onclick="myReset()">Reset</button></p>
</nabble_embed>
<b>nota:</b> o gif perde sua animação. O botão não está incluído em tag form.
Uma imagem foi incluída na página, a outra está sendo carregada de URL.
Devido a variável 'a' para new Image estar sendo utilizada na mensagem acima temos que usar outra neste código.
<script>
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    var img = document.getElementById("scream");
b = new Image();
b.src='http://jsmastronomy.30143.n7.nabble.com/file/n592/anim_claps.gif';
function myCanvas() {


    ctx.drawImage(img ,10,10);
    ctx.drawImage(b,50,10);
}

function myReset(){
  ctx.clearRect(0,0,150,150);
}
</script>