Рисование на холст при щелчке мышью отключено

Question

Мой <canvas> элемент занимает 100vw а также 100vh, Я хочу иметь возможность щелкнуть в любом месте и нарисовать там картинку. Прямо сейчас, когда я нажимаю на экран, изображение не прорисовывается где-то близко к тому месту, где я нажимаю. Чем ближе я нажимаю в верхнем левом углу, тем ближе. Но если я немного отклонюсь от угла, изображение будет сильно сдвинуто вниз и вправо.

Как я могу рассчитать смещение, которое мне нужно, чтобы изображение рисовалось именно там, где я щелкаю?

//var count1 = (Math.floor(Math.random() * screen.width)) + 1;
//var count2 = (Math.floor(Math.random() * screen.height)) + 1;

function onCanvasClick() {
  var image = document.getElementById("image");
  var xLoc = event.clientX;
  var yLoc = event.clientY;
  var loc = "xLoc is: " + xLoc + " | yLoc is: " + yLoc;
  console.log(loc);
  var c = document.getElementById("myCanvas");
  var ctx = c.getContext("2d");
  ctx.drawImage(image, xLoc, yLoc);
}

#myCanvas {
  width: 99vw;
  height: 99vh;
  border: 2px solid rgba(255, 255, 255, 0.5);
  background-color: rgba(58, 154, 221, 0.3);
}

#image {
  width: 100px;
  height: 100px;
  display: none;
}

<canvas id="myCanvas" onmousedown="onCanvasClick()">You dont support this!</canvas>
<img id="image" src="//lorempixel.com/100/100/abstract/5/"></img>

Answer 1

Изменение размера холста с помощью CSS растягивает его содержимое, подобно тому, как <img> ведет себя.
Растяжение смещает координаты холста относительно вашего щелчка мышью.
Например, щелчок по координатам (5,5) может перевести координаты растянутого холста в (15,25).

Размер холста
Отображаемый размер холста можно изменить с помощью таблицы стилей. Изображение масштабируется во время рендеринга, чтобы соответствовать размеру стиля. Если ваш рендеринг кажется искаженным, попробуйте явно указать ваши атрибуты width и height в атрибутах, не используя CSS.

Вы можете установить размеры холста с помощью JavaScript, чтобы он заполнял область просмотра.

var image = document.getElementById("image");
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

c.width = window.innerWidth;
c.height = window.innerHeight;

function onCanvasClick() {
  var xLoc = event.clientX;
  var yLoc = event.clientY;
  ctx.drawImage(image, xLoc, yLoc);
}

body {
  margin: 0;
}
#myCanvas {
  display: block;
  background-color: rgba(58, 154, 221, 0.3);
}
#image {
  display: none;
}

<canvas id="myCanvas" onmousedown="onCanvasClick()" width="100%" height="100%">You dont support this!</canvas>
<img id="image" src="//lorempixel.com/50/50/abstract/5/"></img>

Для получения дополнительной информации см.:
HTML5 Canvas искажен?
Изменение размера HTML5-холста по размеру окна
HTML5 Canvas 100% Ширина Высота области просмотра?

---

Изменение размера очистит холст, поэтому адаптивный дизайн потребует дополнительной функциональности.
У Мэтью Крамли есть идеи по перерисовке / масштабированию существующего контента при изменении размера.