Question

0

174

Visualizações

Why can I only do a canvas of determined dimensions?

I'm doing a project in which I use a photo and a canvas element that draws it to know what colors are in this photo, the problem is that only lets me do this with a photo width of 300px and a height of 150px. If I put other values the canvas zooms the photo and does not let me use the whole area, I leave attached the code and some images. The problem is that, if I increase the dimensions of the photo and the dimensions of the canvas it zooms, leaving only select what is shown on the screen.

The image of 300x150 correct image

Image that doesn't work:

bad working image

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>

about 4 years ago · Juan Pablo Isaza

1 Respostas

Responde à pergunta

0

Responde à pergunta

Encontrar trabalhos remotos

Answer 1 · 2022-07-07T01:59:10.982Z

You can add width and height attributes to your <canvas> HTML element.

You can either do this declaratively in the HTML:

<canvas width="1024" height="768" id="canvas></canvas>

Or imperatively via JavaScript:

const myCanvas = document.querySelector('canvas');
myCanvas.setAttribute('width', '1024');
myCanvas.setAttribute('height', '768');

0

174

Why can I only do a canvas of determined dimensions?

1 Respostas

0

Encontrar trabalhos remotos

Andres GPT