Using a line to divide a canvas into two new canvases
Using a line to divide a canvas into two new canvases I'm looking to allow users to slice an existing canvas into two canvases in whatever direction they would like. I know how to allow the user to draw a line and I also know how to copy the image data of one canvas onto two new ones, but how can I copy only the relevant color data on either side of the user-drawn line to its respective canvas? For example, in the following demo I'd like the canvas to be "cut" where the white line is: const canvas = document.querySelector("canvas"), ctx = canvas.getContext("2d"); const red = "rgb(104, 0, 0)", lb = "rgb(126, 139, 185)", db = "rgb(20, 64, 87)"; var width, height, centerX, centerY, smallerDimen; var canvasData, inCoords; function sizeCanvas() { width = canvas.width = window.innerWidth; height = canvas.height = window.innerHeight; centerX = width / 2; centerY = height / 2; smallerDim...