Estoy tratando de crear un canva en el que hay una imagen fija siempre y a continuación podamos subir una imagen y que quede super puesta pero no consigo realizarlo, ya que la imagen nueva siempre reemplaza la que ya habia.
//imagen o render de fondo del canvas
window.onload = canvas;
function canvas()
{
var canvas = document.getElementById("canvas");
if( canvas && canvas.getContext("2d") )
{
var context = canvas.getContext("2d");
var myImg = document.getElementById("img");
context.drawImage(myImg, 0, 0, 550, 550, 0, 0, 600, 500);
}
}
//imagen que subimos a continuación
document.getElementById('inp').onchange = function(e) {
var img = new Image();
img.onload = draw;
img.onerror = failed;
img.src = URL.createObjectURL(this.files[0]);
};
function draw() {
var canvas = document.getElementById('canvas');
canvas.width = this.width;
canvas.height = this.height;
var ctx = canvas.getContext('2d');
ctx.drawImage(this, 0, 0, 550, 550, 0, 0, 600, 500);
}
function failed() {
console.error("The provided file couldn't be loaded as an Image media");
}
canvas {
border: 2px dotted black;
}
<!DOCTYPE html>
<html lang="es" dir="ltr">
<head>
<meta charset="UTF-8" />
</head>
<body>
<input type="file" id="inp" />
<canvas id="canvas" width="500" height="400">
Su navegador no soporta el elemento html5 canvas.
</canvas>
<img id="img" src="https://mdn.mozillademos.org/files/5397/rhino.jpg" style="display: none;"/>
</body>
</html>
Alguna idea sobre como podría realizar esto? en que me estoy equivocando? Muchas gracias.