Cannot read property 'clientX' of undefined, using jquery
<p>Hello so i am trying to learn how to do a drawing app using HTML5 canvas
and i wrote this code so far, the thing is the browser console keeps telling me that Cannot read property 'clientX' of undefined, i am using jquery of course</p>

<p>here is the JS code:</p>

<pre><code>var canvas;
var context;


function getMousePos(e) {
    var canBoundX = canvas.offsetLeft;
    var canBoundY = canvas.offsetTop;
    var x = e.clientX - canBoundX,
        y = e.clientY - canBoundY;

    return {x: x, y: y};
}


function drag_click() {
    console.log(getMousePos());
}

function drag() {
    console.log(getMousePos());
}

function drag_stop() {
    console.log(getMousePos());
}

function draw() {
    canvas = $("#mainCanvas")[0];
    context = canvas.getContext('2d');
    context.strokeStyle =  "#000";
    context.lineWidth = 4;
    context.lineCap = "round";

    $(canvas).mousedown(function (e) {
        drag_click();
    });
    $(canvas).mousemove(function (e) {
        drag();
    });
    $(canvas).mouseup(function (e) {
        drag_stop();
    });
}


$(document).ready(draw()); 
</code></pre>