the reason behind the getcontext error and how to resolve it

the reason behind the getcontext error and how to resolve it

I am using html5 and javascript ,i want to know that why this error comes
Error :- Unable to get the value of the property 'getContext': object is
null or undefined.
I have one page in which i have speedometer which reads value from the
excel file ..when i run this page i got this error described in the
picture .
this error doesnot terminate my program ,while clicking on yes it get
away.i want to know that why this error is coming and how to get rid of
that.
![if (canvas !== null && canvas.getContext)][2]
WHAT I HAVE TRIED: BY replacing the (==) to (=), this resolve my problem
but it gives me another error Canvas is not supported by your browser.
shown as in the picture.I didnot know why this error is coming .Because
after drawing the canvas it gives me this error .Any body have any idea
what can i do to resolve this thing
function buildOptionsAsJSON(canvas, iSpeed) {
/* Setting for the speedometer
* Alter these to modify its look and feel
*/
var centerX = 210,
centerY = 210,
radius = 140,
outerRadius = 100;
// Create a speedometer object using Javascript object notation
return {
ctx: canvas.getContext('2d'),
speed: iSpeed,
center: {
X: centerX,
Y: centerY
},
levelRadius: radius - 10,
gaugeOptions: {
center: {
X: centerX,
Y: centerY
},
radius: radius
},
radius: outerRadius
};
}
function clearCanvas(options) {
options.ctx.clearRect(0, 0, 800, 600);
applyDefaultContextSettings(options);
}
function initCanvas() {
var i=0;
var canvas1 = document.getElementById('tutorial');
var canvas2 = document.getElementById('tutorial1');
var canvas3 = document.getElementById('tutorial2');
var canvas4 = document.getElementById('tutorial3');
var canvas5 = document.getElementById('tutorial4');
for(i=1; i<6; i++)
{
readdata(i, 2);
}
}
function draw(canvas0) {
/* Main entry point for drawing the speedometer
* If canvas is not support alert the user.
*/
//alert('1');
// var canvas = document.getElementById('tutorial'),
var canvas = canvas0;
options = null;
// Canvas good?
if (canvas !== null && canvas.getContext('2d')) {
//options = buildOptionsAsJSON(canvas, iCurrentSpeed);
options = buildOptionsAsJSON(canvas, iTargetSpeed);
// Clear canvas
clearCanvas(options);
// Draw the metallic styled edge
drawMetallicArc(options);
// Draw the background
drawBackground(options);
// Draw tick marks
drawTicks(options);
// Draw labels on markers
drawTextMarkers(options);
// Draw speeometer colour arc
drawSpeedometerColourArc(options);
// Draw the needle and base
drawNeedle(options);
} else {
alert("Canvas not supported by your browser!");
}
if (iTargetSpeed == iCurrentSpeed) {
clearTimeout(job);
return;
} else if (iTargetSpeed < iCurrentSpeed) {
bDecrement = true;
} else if (iTargetSpeed > iCurrentSpeed) {
bDecrement = false;
}
if (bDecrement) {
if (iCurrentSpeed - 10 < iTargetSpeed)
iCurrentSpeed = iCurrentSpeed - 1;
else
iCurrentSpeed = iCurrentSpeed - 5;
} else {
if (iCurrentSpeed + 10 > iTargetSpeed)
iCurrentSpeed = iCurrentSpeed + 1;
else
iCurrentSpeed = iCurrentSpeed + 5;
}
job = setTimeout("draw()", 5);
}