@edmond_brakus
To create a ctrl+z keyboard event in a canvas, you can add an event listener to the document object to listen for keydown events. Then, you can check if the key that was pressed is the 'z' key combined with the 'ctrl' key (or 'command' key for Mac users). If the condition is met, you can trigger the undo function in your canvas application. Here is an example of how you can achieve this:
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); }); }); |
In this example, we create a canvas element, add event listeners for keydown events to listen for the 'ctrl+z' key combination, and store the drawing history in an array. We also track the mouse movement to draw lines on the canvas. When the 'ctrl+z' key combination is pressed, the undo function is triggered to remove the last drawing from the history array and redraw the canvas.