TypeError: $(...).get(...) is undefined

Question

I am a kind of newbie to the canvas. I am trying to hard code a html page to display different diagrams. For this I am having a html page like this:

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>

 <script>
 $.getScript(path + "js/display.js");
 </script>

 <div data-role="header">  

 </div>  
 <div data-role="content" style="padding: 15px" onload="loadSQLRecords();">

      <input type="button" data-inline="true" class="appButton" value="Display Chart" id="LoadReservatButton" onclick="currentPage.displaychart();" /> 

 </div>

and the login.js like:

currentPage={};

currentPage.init = function() {
WL.Logger.debug("report :: init");
};

currentPage.displaychart=function(){
WL.Logger.debug("payment :: loadGenReportPage");
pagesHistory.push(path + "pages/chart.html");
$("#pagePort").load(path + "pages/chart.html");
loadSQLRecords();

};

function loadSQLRecords(){

var ctx = $('#myCanvas').get(0).getContext('2d');
// Box1-ESPS P1
ctx.beginPath();
ctx.lineWidth = "1";
ctx.strokeStyle = "black";
ctx.rect(5, 5, 100, 100);  
ctx.stroke();
}

and the chart.html page is:

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>

<script>
$.getScript(path + "js/display.js");
</script>


<div data-role="header">  

</div>  
<div data-role="content" style="padding: 15px" onload="loadSQLRecords();">
  <canvas id="myCanvas" width="1000" height="750" style="border:1px solid #d3d3d3;"/>

</div>

But, I am getting an error that TypeError: $(...).get(...) is undefined. Can anyone please let me know my mistake here?