espero que me puedan ayudar u orientar , lo que pasa es que tengo que hacer es que en el canvas subir una imagen por un input tipo file y que se muestre , ademas poder moverla con el mouse que hasta ahi todo bien , el problema empieza cuando necesito insertar un cuadro estatico en la base del canvas con un numero insertado en ese mismo cuadro , pero al mover la imagen con el mouse se me elimina tanto el texto como el recuadro , espero que me puedan ayudar , lo necesito urgente y entiendo que cuando uno mueve el mouse se redibuja el contenido, pero no entiendo como podria realizar esto colocando un cuadro estatico y que no se borre
de antemano gracias a todos los que me leyeron y sobre todo a los que me puedan ayudar u orientar de alguna forma !
var m = {
x: 0,
y: 0 };
var img,
dx = 0,
dy = 0;
let zoom = document.getElementById('zoom')
document.getElementById("input").addEventListener('change', function(e) {
img = new Image();
img.onload = draw;
img.onerror = failed;
img.src = URL.createObjectURL(this.files[0]);
console.log(this.files[0])
ctx.fillRect(10,10,200,20);
});
function draw() {
var canvas = document.getElementById("upper-canvas");
var cw = (canvas.width = 200);
var ch = (canvas.height = 250);
var ctx = canvas.getContext("2d");
ctx.drawImage(this, 0, 0);
ctx.fillText("Texto en el Canvas",100,50);
// ctx.fillRect(10,10,200,20);
var down = false;
let mas =1;
zoom.addEventListener('click',(e)=>{
mas =mas+ 0.2;
img.style.transform = "scale(2.2)"
ctx.scale(mas,mas)
console.log(ctx)
})
canvas.addEventListener(
"mousedown",
function() {
down = true;
var punto_de_agarre = oMousePos(canvas, event);
dx -= punto_de_agarre.x;
dy -= punto_de_agarre.y;
}
);
canvas.addEventListener(
"mouseup",
function() {
down = false;
m = oMousePos(canvas, event);
dx += m.x;
dy += m.y;
},
false
);
canvas.addEventListener(
"mousemove",
function(event) {
if (down) {
clear();
m = oMousePos(canvas, event);
ctx.drawImage(img, m.x + dx, m.y + dy);
console.log(event)
}
},
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"
);
}
function oMousePos(canvas, evt) {
var ClientRect = canvas.getBoundingClientRect();
return {
//objeto
x: Math.round(evt.clientX - ClientRect.left),
y: Math.round(evt.clientY - ClientRect.top)
};
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./css/estilos.css">
<title>Document</title>
</head>
<body>
<div class="col-md-2">
<input type="file" id="input"></input>
</div>
<div id="canvas">
<canvas id="upper-canvas"></canvas>
</div>
<button id="zoom">zoom</button>
<script src="./js/script.js"></script>
</body>
</html>