Estoy construyendo una herramienta de dibujo con la función de lienzo y estoy tratando de permitir que el usuario cambie el color de la línea que está usando. Seguí un tutorial de video, pero creo que JS podría actualizarse desde que se hizo.

Si pudieras ayudarme con mi proyecto de la universidad, ¡sería increíble! ¡¡¡Gracias!!!

 const canvas = document.getElementById("canvas") canvas.width = window.innerWidth - 60; canvas.height = 400; let context = canvas.getContext("2d"); context.fillStyle = "white"; context.fillRect(0,0, canvas.width, canvas.height); let draw_color = "black"; let draw_width = "2"; let is_drawing = false; function change_color() { draw_color = element.style.background; } // Allows for the pen to go up and down without constantly drawing // canvas.addEventListener("touchstart", start, false); canvas.addEventListener("touchmove", draw, false); canvas.addEventListener("mousedown", start, false); canvas.addEventListener("mousemove", draw, false); canvas.addEventListener("touchend", stop, false); canvas.addEventListener("mouseup", stop, false); canvas.addEventListener("mouseout", stop, false); // Functions that allow the drawing to actually happen // function start(event){ is_drawing = true; context.beginPath(); context.moveTo(event.clientX - canvas.offsetLeft, event.clientY - canvas.offsetTop); event.preventDefault(); } function draw(event) { if (is_drawing) { context.lineTo(event.clientX - canvas.offsetLeft, event.clientY - canvas.offsetTop) context.strokestyle = draw_color; context.linewidth = draw_width; context.lineCap = "round"; context.lineJoin = "round"; context.stroke(); } event.preventDefault(); } // Functions that allow the drawing to actually stop // function stop(event) { if (is_drawing) { context.stroke(); context.closePath(); is_drawing = false; } event.preventDefault(); }