Me podrian por favor ayudar, lo que quiero que suceda es que pueda insertar una imagen que es de tipo canvas y esa imagen moverla con el mouse sobre una caja... Esta inserta pero al dar clic sobre la imagen, esta desaparece. GRACIAS!!!
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('upper-canvas');
canvas.width = this.width;
canvas.height = this.height;
var ctx = canvas.getContext('2d');
ctx.drawImage(this, 0, 0);
var down = false;
ctx.canvas.addEventListener('mousedown', function () {
down = true;
}, false);
ctx.canvas.addEventListener('mouseup', function () {
down = false;
}, false);
ctx.canvas.addEventListener('mousemove', function (event) {
if (down){
clear();
ctx.drawImage(event.clientX - this.offsetLeft,
event.clientY - this.offsetTop, 50, 50);
}
}, false);
function clear(){
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillRect(200, 200, 0, 200);
}
}
function failed() {
console.error("El archivo proporcionado no se pudo cargar como un medio de imagen");
}
<div class="col-md-2" style="width: 50px; height: 30px;">
<input type="file" id="inp"></input></div>
<div id="canvas" style="width: 400px; height: 400px; background-color: blue;">
<canvas id="upper-canvas" style="position: absolute; width: 50px; height: 50px; left:15px; top: 45px; user-select: none; cursor: default;"></canvas>
</div>