Why can I only do a canvas of determined dimensions?

Question

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>

You have to change the size of the "canvas" (the coordinate space) via the `.height` and `.width` properties of the [` — Andreas, Dec 16 '21 at 09:42
PS are you sure you need support for IE9? Instead of `unselectable` today we simply use CSS `user-select: none;` https://stackoverflow.com/questions/826782/how-to-disable-text-selection-highlighting — Roko C. Buljan, Dec 16 '21 at 09:51
One point that is not aborded in the linked q/a and which might have been confusing to you is that drawImage takes the intrinsic size of the image and completely disregards the `width` and `height` of the element. — Kaiido, Dec 16 '21 at 10:16

Rounin · Answer 1 · 2021-12-16T19:19:16.477

0

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');

edited Dec 16 '21 at 19:19

answered Dec 16 '21 at 09:46

Rounin

27,134
9
83
108

3

And you vote to close as dupe (or at least add an explanation what the problem is, and how your "answer" fixes that) – Andreas Dec 16 '21 at 09:47

Why can I only do a canvas of determined dimensions?

1 Answers1