html5 - Use clearRect to erase part of a png image drawn to canvas with drawImage -

is possible use clearrect delete part of png image drawn canvas using drawimage?

i'm trying , not working:

<canvas id="canvas"></canvas> <img id="pngimg" src="" alt="" />  [...]  canvas = document.getelementbyid("canvas"); pngimg = document.getelementbyid("pngimg");  [...]  pngimg.src = canvas.todataurl(); context.drawimage(pngimg, 0, 0, canvas.width, canvas.height);  [...] 

then using clearrect erase mouse. erase works on strokes added canvas using drawline not images using drawimage. must clearrect instead of drawing solid color because background isn't solid. possible this?

where loading image from?

you can't use canvas.todataurl() if image on canvas originated different domain. see here: why canvas.todataurl() throw security exception?

in same domain situation should work:

original image: <img id="pngimg" src="http://www.domain.com/image.png" /><br/>  canvas clear: <canvas width="160" height="80" id="canvas"></canvas><br/>  altered image: <img id="newimg" src="" /> 

and script:

canvas = document.getelementbyid("canvas"); pngimg = document.getelementbyid("pngimg"); newimg = document.getelementbyid("newimg");  var context = canvas.getcontext("2d"); context.drawimage(pngimg, 0, 0, canvas.width, canvas.height); context.clearrect(125,0,35,25);  newimg.src = canvas.todataurl("image/png");