Так он вроде и так прозрачный
<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>
не заметил предыдущего ответа ... Пока писал - появился