Блог

Я хотел бы использовать canvas для рисования точек при наведении курсора мыши: моя реализация отлично работает в Chrome и Firefox, но по какой-то причине она не работает в Safari (однако рисование линии при наведении курсора мыши работает в Safari)

любая помощь будет оценена!

—> https://draw-9.superhi.com /

код:

 let canvas = document.querySelector("canvas");

let x = 0;
let y = 0;


let context = canvas.getContext("2d");
context.strokeStyle = "black";
context.lineWidth = 15;
context.lineCap = "round";

canvas.addEventListener("mousemove", function(e) {
  
    x = e.offsetX;
    y = e.offsetY;

  context.moveTo(x, y);
   context.lineTo(x, y);
    context.stroke();
});
  

В соответствии со спецификациями Safari выполняет

2. Удалите все отрезки линии нулевой длины из пути.
3. Удалите из пути любые подпути, не содержащие линий (т. Е. подпути с одной точкой).

перед трассировкой.

Ваш путь полностью состоит из таких отрезков линии нулевой длины ( moveTo(x,y); lineTo(x,y) ), и, следовательно, рисовать нечего.

Другие браузеры здесь глючат: отчет об ошибке Firefox, Chrome.

Чтобы сделать то, что вы хотите, т.е. нарисовать круг, используйте arc() метод. Кроме того, не забудьте вызвать call beginPath() , иначе ваш path будет просто расти, и вы будете снова и снова нажимать на одно и то же место, что приведет к плохой графике и производительности.

 const canvas = document.querySelector("canvas");

let x = 0;
let y = 0;

const radius = 7.5;
const context = canvas.getContext("2d");
context.strokeStyle = "black";

canvas.addEventListener("mousemove", function(e) {
  
  x = e.offsetX;
  y = e.offsetY;

  context.beginPath();
  context.moveTo(x   radius, y);
  context.arc(x, y, radius, 0, Math.PI*2);
  context.fill();

});  

 <canvas width="900" height="900">