I had successed in assigned right-click to eraser in the canvas drawing, but the right-click context-panel keep appear despite me already adding e.preventDefault() . What did I do wrong?

//Canvas
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
//Variables
var canvasx = $(canvas).offset().left;
var canvasy = $(canvas).offset().top;
var last_mousex = last_mousey = 0;
var mousex = mousey = 0;
var mousedown = false;
var tooltype = 'draw';

//Mousedown
$(canvas).on('mousedown', function(e) {
      last_mousex = mousex = parseInt(e.clientX-canvasx);
      last_mousey = mousey = parseInt(e.clientY-canvasy);
      mousedown = true;
    
});

//Mouseup
$(canvas).on('mouseup', function(e) {
    mousedown = false;
});

//Mousemove
$(canvas).on('mousemove', function(e) {
    mousex = parseInt(e.clientX-canvasx);
    mousey = parseInt(e.clientY-canvasy);
    switch (e.which) {
    case 1:
      //alert("left mosue lcick!")
      ctx.globalCompositeOperation = 'source-over';
            ctx.strokeStyle = 'black';
            ctx.lineWidth = 3;
      break;
    case 2:
      alert("midde mouse click");
      break;
    case 3:
        e.preventDefault();
        ctx.globalCompositeOperation = 'destination-out';
      ctx.lineWidth = 10;
      break;
      //alert("right mosuelcick!");
      //break;
    }
    if(mousedown) {
        ctx.beginPath();
        ctx.moveTo(last_mousex,last_mousey);
        ctx.lineTo(mousex,mousey);
        ctx.lineJoin = ctx.lineCap = 'round';
        ctx.stroke();
    }
    last_mousex = mousex;
    last_mousey = mousey;
    //Output
    $('#output').html('current: '+mousex+', '+mousey+'<br/>last: '+last_mousex+', '+last_mousey+'<br/>mousedown: '+mousedown);
});

//Use draw|erase
use_tool = function(tool) {
    tooltype = tool; //update
}

jsfiddle link:

jsfiddle