besoin d'aide pour canvas

Voila je rencontre un petit problème avec mon code.

Ce que je fais

Je suis entrain de mettre en place une signature pour le client avec canvas

class Sign
{
    constructor()
{
this.canvas = $("#canvas");
this.context = $("#canvas").getContext('2d');
this.context.strokeStyle = "rgb(23, 145, 167)";
this.context.lineCap = 'round';
this.context.lineCap = 'round';
this.cursorX, this.cursorY;
this.painting = false;
this.started = false;
this.mousemove();
this.mousedown();
this.mouseup();

};

mousedown()
        {

          this.canvas.mousedown(function(e)
          {
            this.painting = true;
            // Coordonnées de la souris :
            this.cursorX = e.pageX;
            this.cursorY = e.pageY;
          });
         };

mousemove()
        {
            this.canvas.mousemove( function(e)
            {
             if (painting)
             {
                    this.cursorY = (e.pageY - canvas.offsetTop) -2;
                    this.cursorX = (e.pageX - canvas.offsetLeft) -2;
                    drawline();
             }

            });

        };

drawline()
{

    if (!this.started)
    {
            this.context.beginPath();
            this.context.moveTo(this.cursorX, this.cursorY);
            this.started = true;
     }
    else
    {
            this.context.lineTo(this.cursorX, this.cursorY);
            this.context.stroke();
    }

};

mouseup()
{
    this.canvas.mouseup(function ()
        {
            this.painting = false;
            this.started = false;
        })

}

};

Ce que j'obtiens

voiici l'erreur, je ne comprend pas la source de c'elle ci (ligne 6) :
Uncaught TypeError: $(...).getContext is not a function