Каким образом реализовать режим рисования на Canvas?

1
2
3

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

1

var isDrawing = false;

1
2
3
4

canvas.addEventListener("mousedown", startDraw);
canvas.addEventListener("mousemove", draw);
canvas.addEventListener("mouseup", endDraw);
canvas.addEventListener("mouseout", endDraw);

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

function startDraw(e) {
  isDrawing = true;
  ctx.moveTo(e.clientX, e.clientY);
}

function draw(e) {
  if (isDrawing) {
    ctx.lineTo(e.clientX, e.clientY);
    ctx.stroke();
  }
}

function endDraw(e) {
  isDrawing = false;
}

1
2

ctx.strokeStyle = "red"; //цвет
ctx.lineWidth = 5; //толщина