CODEWITHSUNDEEP
javascriptjquerycanvas
Kanchan Sarkar
Kanchan Sarkar

Reputation: 463

Drawing lines with (mouse + other key)

I am a newbie in javascript and canvas. I am using the following code to draw a line while the mouse is dragged. I am trying to add another drawing option with the original while I dragged the mouse with some other key (say mouse + p) but I didn't get it, how to add. So basically there will be two options for drawing 1) mouse drag with one color "green" 2) key "P" + mouse drag with another color "red". I searched a lot on different site but everywhere the option is "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)
    })
}

it will be a great help if you just point me where to add that option in my code.

Upvotes: 0

Views: 84

Answers (1)

bli07
bli07

Reputation: 673

Add the following code

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

Upvotes: 1

Related Questions