Каким образом реализовать рисование с помощью кисти на Canvas?

1

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");

// Установка цвета и толщины линии
ctx.strokeStyle = "#000000";
ctx.lineWidth = 5;

// Установка типа соединения линий
ctx.lineJoin = "round";

// Установка типа закругления концов линий
ctx.lineCap = "round";

// Очистка Canvas
ctx.clearRect(0, 0, canvas.width, canvas.height);

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

let isDrawing = false;
let lastX = 0;
let lastY = 0;

function draw(e) {
  if (!isDrawing) return;

  // Рисование линии
  ctx.beginPath();
  ctx.moveTo(lastX, lastY);
  ctx.lineTo(e.offsetX, e.offsetY);
  ctx.stroke();

  // Обновление последних координат
  lastX = e.offsetX;
  lastY = e.offsetY;
}

// Обработчики событий мыши
canvas.addEventListener("mousedown", (e) => {
  isDrawing = true;
  lastX = e.offsetX;
  lastY = e.offsetY;
});

canvas.addEventListener("mousemove", draw);

canvas.addEventListener("mouseup", () => {
  isDrawing = false;
});

canvas.addEventListener("mouseout", () => {
  isDrawing = false;
});

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

const colorInput = document.getElementById("colorInput");
const thicknessInput = document.getElementById("thicknessInput");

colorInput.addEventListener("change", () => {
  ctx.strokeStyle = colorInput.value;
});

thicknessInput.addEventListener("change", () => {
  ctx.lineWidth = thicknessInput.value;
});