Element offsetLeft undefined

I am developing a web application where different kinds of charts can be displayed. One of those types is color-pickers, and following is the code I wrote for a simple color-picker (with some help from the internet).

function addColorPicker_(widgetID, graphID, data, w, h, x, y) {

    var div = '<div class="widget-color colorpicker" style="  -webkit-border-radius: 0px;-moz-border-radius: 0px;border-radius: 0px;"><p id="title_'+graphID+'" class="chart-title-font">'+data.chartTitle+'</p><div id="colorpicker'+graphID.substring(11)+'" class="" style="display: block;margin: 0 auto;"><canvas width="230" height="180" id="canvas_'+graphID+'"></canvas><div><button id="setColorBtn" class="" style="" onclick="setColor(\''+graphID+'\')">Set Color</button></div></div></div>';
    addDivtoWidget(div, w, h, x, y, widgetID);

    var canvasDiv = document.getElementById("canvas_"+graphID);
    var canvas = canvasDiv.getContext('2d');
    var img = new Image();
    img.src = 'img/image.jpg';

    $(img).load(function(){
      canvas.drawImage(img,0,0);
    });

    $('#canvas_'+graphID).click(function(event){
        var canvasDiv = document.getElementById("canvas_"+graphID);

        // getting user coordinates
        var x = event.pageX - canvasDiv.offsetLeft;
        var y = event.pageY - canvasDiv.offsetTop;

        // getting image data and RGB values
        var img_data = canvas.getImageData(x, y, 1, 1).data;
        var R = img_data[0];
        var G = img_data[1];
        var B = img_data[2];  

        var rgb_string = R + ',' + G + ',' + B;
    });
}

However canvas.offsetLefT and canvas.offsetTop are returned as undefined. When I check their values in Chrome developer console, they display finite values. Why does this happen? (Please ignore the other parts of the code)