TypeError: canvas.getContext ('2d') n'est pas une fonction

Question

J'ai écrit un simple code jQuery:

canvas = $('#canvas'); ctx = canvas.getContext('2d');

Et obtenir 'TypeError: canvas.getContext est pas une fonction' erreur. J'ai fait des recherches ici; Bien qu'il y ait des questions similaires dans lesquelles les programmeurs ont eu des problèmes similaires, leur contexte était différent. Je reçois également les erreurs suivantes dans la même ligne:

at i (jquery.min.js:2) at Object.fireWith [as resolveWith] (jquery.min.js:2) at Function.ready (jquery.min.js:2) at HTMLDocument.J (jquery.min.js:2)

Voici mon code JQ:

$(function() { 
var arr_touches = []; 
var canvas; 
var ctx; 
var down = false; 
var color = 'black'; 
var width = 5; 

canvas = $('#canvas'); 
ctx = canvas.getContext('2d'); 
ctx.lineWidth = width; 
canvas.on({ 
    mousemove: function(e){ 
    xPos = e.clientX-canvas.offsetLeft; 
    yPos = e.clientY-canvas.offsetTop; 
    if(down == true) 
    { 
    ctx.lineTo(xPos,yPos); //create a line from old point to new one 
    ctx.strokeStyle = color; 
    ctx.stroke(); 
    } 
}, 
mousedown:function(){ 
    down = true; 
    ctx.beginPath(); 
    ctx.moveTo(xPos, yPos); 
}, 
mouseup:function(){ 
    down = false; 
}, 
//handling mobile touch events 
touchstart:function(evt){ 
    var touches = evt.changedTouches; 
    for(var i = 0; i < touches.length; i++) 
     { 
      if(isValidTouch(touches[i])) 
       { 
       evt.preventDefault(); 
       arr_touches.push(copyTouch(touches[i])); 
       ctx.beginPath(); 
       ctx.fillStyle = color; 
       ctx.fill(); 
      } 
     } 
}); 

Answer 1

.getContext() est pas une méthode jquery valide. C'est une méthode valide sur l'élément de canevas HTML. Référence à MDN.

Je pense que ce que vous cherchez est:

canvas = document.getElementById('canvas'); 

Voir fiddle