[Dilettante_Pro]

Так он вроде и так прозрачный

<style>
#first     {
     position:absolute;
     top:70px;
     left:100px;
}
#sec     {
     position:absolute;
     top:70px;
     left:400px;
}
#res {
     position:absolute;
     top:0px;
     left:350px;
     width:300px;
     height:100px;
     border:1px solid black;
}

canvas {
    position:absolute;
    top:0px;
    left:0px;
    width:300px;
    height:100px;
    border:1px solid black;
}
</style>
<img id="first" src="https://javascript.ru/cat/list/donkey.gif">
<img id="sec" src="https://javascript.ru/cat/list/donkey.gif">
<img id="res" >
<canvas  ></canvas>
<script>
var canvas = document.querySelector("canvas"),
     ctx        = canvas.getContext("2d");
ctx.rect(50,20,100,100);
ctx.stroke();
var dataURL = canvas.toDataURL();
res.src = dataURL;
</script>

не заметил предыдущего ответа ... Пока писал - появился