为什么我只能做一个确定尺寸的画布？ [复制]

Question

我正在做一个项目，其中我使用一张照片和一个画布元素来绘制它以了解这张照片中的颜色，问题是我只能用 300 像素的照片宽度和 300 像素的高度来执行此操作150 像素。如果我输入其他值，画布会缩放照片并且不允许我使用整个区域，我会留下附加代码和一些图像。问题是，如果我增加照片的尺寸和它缩放的画布的尺寸，只留下选择屏幕上显示的内容。

300x150 的图像 正确的图像

无效的图片：

糟糕的工作形象

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>

Answer 1

您可以将width 和height 属性添加到您的<canvas> HTML 元素。

您可以在 HTML 中以声明方式执行此操作：

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

或者通过 JavaScript 强制执行：

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