Рисование линий с помощью (мышь + другая клавиша)

Question

Я новичок в JavaScript и холсте. Я использую следующий код для рисования линии, когда мышь перетаскивают. Я пытаюсь добавить другой вариант рисования с оригиналом, в то время как я перетаскивал мышь с помощью другой клавиши (скажем, мыши + p), но я не понял, как добавить. Таким образом, в основном будет два варианта рисования: 1) перетаскивание мышью одним цветом «зелёный» 2) клавиша «P» + перетаскивание мышью другим цветом «красный». Я много искал на разных сайтах, но везде есть опция "mouse: down", "mouse: move", "mouse: up".

function makeBackgroundDrawingFabricCanvas(myCanvasObj, appendToCol) {
    let canvas_id = myCanvasObj.id
    let canvas_html = $("<canvas>")        
    $(canvas_html).attr("id", canvas_id)
    $(canvas_html).attr("height", canvas_height)
    $(canvas_html).attr("width", canvas_width)
    $(appendToCol).append(canvas_html) 
    var canvas = new fabric.Canvas(canvas_id);
    canvas.isDrawingMode = true
    canvas.freeDrawingBrush.color = "green";
    canvas.freeDrawingBrush.width = 10;
    let add_back_detail_button = $("<button class='btn btn-primary'>Add Back Detail</button>")
    $(appendToCol).append(add_back_detail_button)
    $(add_back_detail_button).click(function(){ 
        somefunction(canvas_3_add, obj, canvas4_id, obj.image.original_image)
    })
}

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

Answer 1

Добавьте следующий код

document.addEventListener("keydown", event => {
  if (event.key === "p") {
    canvas.freeDrawingBrush.color = "red";
  }
});
document.addEventListener("keyup", event => {
  if (event.key === "p") {
    canvas.freeDrawingBrush.color = "green";
  }
});