HTML5 Canvas Cange цвет линии, которая уже существует

Question

Я сделал приложение для рисования с HTML5 холстом. проблема в том, что всякий раз, когда я меняю цвет, нажимая кнопку смены цвета, я хочу изменить все линии, которые уже существуют. Я не знаю, как это решить.

ниже мой код

const paintCanvas = document.querySelector( 'paint' );
const context = paintCanvas.getContext( '2d' );
context.lineCap = 'round';

const colorPicker = document.querySelector( 'color');

colorPicker.addEventListener( 'change', event => {
    context.strokeStyle = event.target.value; 
  context.stroke();
} );
let x = 0, y = 0;
let isMouseDown = false;

const stopDrawing = () => { isMouseDown = false; }
const startDrawing = event => {
    isMouseDown = true;   
   [x, y] = [event.offsetX, event.offsetY];  
}
const drawLine = event => {
    if ( isMouseDown ) {
        const newX = event.offsetX;
        const newY = event.offsetY;
        context.beginPath();
        context.moveTo( x, y );
        context.lineTo( newX, newY );
        context.stroke();
        //[x, y] = [newX, newY];
        x = newX;
        y = newY;
    }
}

, пожалуйста, дайте мне любую идею.