One part of my javascript works the other does not

One part of my javascript works the other does not

I have a calculate function and the a canvas element I'm not sure why but
the canvas part works and the calculate function does not. if I launch
this from my text editor the calculate function works and the canvas part
does not.
Its really got me confused and I think it may have something to do with
the ordering maybe I'm really not sure can someone please explain these
results?
http://jsfiddle.net/IamSleepy32/tELZd/
this is the calculate function
function calculate(){
var amount=document.getElementById("amount");
var apr=document.getElementById("apr");
var years=document.getElementById("years");
var payment=document.getElementById("payment");
var total=document.getElementById("total");
var totalintrest=document.getElementById("totalintrest");
var principal= parseFloat(amount.value);
var intrest= parseFloat(apr.value)/100/12;
var payments= parseFloat(years.value)*12;
var x= Math.pow(1+intrest,payments);
var monthly= (principal*x*intrest)/(x-1);
if(isFinite){
payment.innerHTML=monthly.toFixed(2);
total.innerHTML=(monthly*payments).toFixed(2);
totalintrest.innerHTML=((monthly*payments)-principal).toFixed(2);
}
else{
payment.innerHTML="";
total.innerHTML="";
totalintrest.innerHTML="";
}
}
This is the beginning of canvas part the rest is in the fiddle
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');