How to make a ctrl+z keyboard event in a canvas?

 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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72

// Get a reference to the canvas element
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

// Create an array to store the drawing history
let history = [];

// Function to undo the last drawing
function undo() {
  if (history.length > 0) {
    history.pop();
    redraw();
  }
}

// Function to redraw the canvas
function redraw() {
  // Clear the canvas
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  // Redraw each item in the history array
  history.forEach(item => {
    ctx.beginPath();
    ctx.moveTo(item.startX, item.startY);
    ctx.lineTo(item.endX, item.endY);
    ctx.stroke();
  });
}

// Add event listener for keydown events
document.addEventListener('keydown', function(event) {
  if (event.key === 'z' && (event.ctrlKey || event.metaKey)) {
    event.preventDefault(); // Prevent the default browser action for this key combo
    undo();
  }
});

// Add event listener for mouse down events on the canvas
canvas.addEventListener('mousedown', function(event) {
  const startX = event.offsetX;
  const startY = event.offsetY;
  
  // Add the starting point to the history array
  history.push({ startX, startY });

  // Add event listener for mouse up events to draw the line
  const mouseMove = function(event) {
    const endX = event.offsetX;
    const endY = event.offsetY;

    // Draw the line to the current mouse position
    ctx.beginPath();
    ctx.moveTo(startX, startY);
    ctx.lineTo(endX, endY);
    ctx.stroke();

    // Update the end point in the history array
    history[history.length - 1].endX = endX;
    history[history.length - 1].endY = endY;

    // Set the new start point for the next segment
    startX = endX;
    startY = endY;
  };

  canvas.addEventListener('mousemove', mouseMove);

  // Add event listener for mouse up to stop drawing the line
  canvas.addEventListener('mouseup', function() {
    canvas.removeEventListener('mousemove', mouseMove);
  });
});