0
173
Views¿Por qué solo puedo hacer un lienzo de determinadas dimensiones?
Estoy haciendo un proyecto en el que uso una foto y un elemento canvas que la dibuja para saber que colores hay en esta foto, el problema es que solo me deja hacer esto con una foto de 300px de ancho y 150px de alto. Si pongo otros valores el lienzo hace zoom en la foto y no me deja usar toda la zona, dejo adjunto el código y algunas imágenes. El problema es que, si aumento las dimensiones de la foto y las dimensiones del lienzo hace zoom, dejando solo seleccionar lo que se muestra en pantalla.
La imagen de 300x150 imagen correcta
Imagen que no funciona:
mala imagen de trabajo 
var xInic, yInic; let ptop = 0; let pleft = 0; var estaPulsado = false; function ratonPulsado(evt) { //Obtener la posición de inicio xInic = evt.clientX; yInic = evt.clientY; estaPulsado = true; //Para Internet Explorer: Contenido no seleccionable document.getElementById("cuadro").unselectable = true; } function ratonMovido(evt, left_pos) { if (estaPulsado) { //Calcular la diferencia de posición var xActual = evt.clientX; var yActual = evt.clientY; var xInc = xActual - xInic; var yInc = yActual - yInic; xInic = xActual; yInic = yActual; //Establecer la nueva posición var elemento = document.getElementById("cuadro"); var position = getPosicion(elemento); elemento.style.top = (position[0] + yInc) + "px"; elemento.style.left = (position[1] + xInc) + "px"; ptop = position[0] + yInc pleft = position[1] + xInc return ptop, pleft; } } * { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .estiloCuadro { width: 5px; height: 5px; border: solid red; position: absolute; cursor: pointer; /*Deshabilitar selección de texto*/ } body { background: aqua; } /*img{ width: 150px; }*/ h1 { background: red; width: 300px; } #what { height: 150px; width: 150px; } <img id="imagen_1" src="https://htmlcolorcodes.com/assets/images/html-color-codes-color-palette-generators-hero.jpg" height="150" width="300"> <span id="he"></span> <div id="cuadro" class="estiloCuadro"></div> <canvas id="canvas"></canvas> <div id="color"> <h1>El color es: </h1><br> <div id="what"></div> <p id="rf"></p> </div> <script src="js/main.js" async></script>
·
Juan Pablo Isaza
1 answers
Answer question0
Puede agregar atributos de width y height a su elemento HTML <canvas> .
Puede hacer esto declarativamente en el HTML:
<canvas width="1024" height="768" id="canvas></canvas>O imperativamente a través de JavaScript:
const myCanvas = document.querySelector('canvas'); myCanvas.setAttribute('width', '1024'); myCanvas.setAttribute('height', '768');
·
Juan Pablo Isaza
Report
Answer question