how to resolve the canvas not supported error

Question

I am using HTML5 Canvas,javascript. I have made an page with the help of html5 canvas and javascript..But when I run it it gave me this error

("Error=Unable to get the value of the property 'getContext': object is null or undefined")

but it does not terminate the program..the program is running fine with this .

 function draw(canvas0) {
     var canvas = canvas0;
     options = null;

     // Canvas good?
     if (canvas !== null && canvas.getContext)

 }


 function initCanvas() {
     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');

     draw(canvas1);
     draw(canvas2);
     draw(canvas3);
     draw(canvas4);
     draw(canvas5);
 }

this is where i am getting the id and returning these values

     <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta charset="utf-8" />
    <title>Speedometer HTML5 Canvas</title>
    <script src="script copy.js">

    </script>

</head>
<body onload='initCanvas();'>

        <canvas id="tutorial" width="440" height="220" style="zoom:50%">
            Canvas not available.
        </canvas>
        <canvas id="tutorial1" width="440" height="220" style="zoom:50%">
            Canvas not available.
        </canvas>
        <canvas id="tutorial2" width="440" height="220" style="zoom:50%">
            Canvas not available.
        </canvas>
        <canvas id="tutorial3" width="440" height="220" style="zoom:50%">
            Canvas not available.
        </canvas>
        <canvas id="tutorial4" width="440" height="220" style="zoom:50%">
            Canvas not available.
        </canvas>

        <form id="drawTemp">

        </form>
    </div>
</body>
</html>

after seeing the answer given by kennebec if have created change in my code

if (canvas != null && canvas.getContext).

After using this line the getContext error is not coming ,But after executing the page that is after drawing the canvas it gives me new error ("Canvas Not Supported By Your Browser").Help me out here.

What is `canvas0`? Shouldn't you be using something like `var canvas = document.getElementById('canvas0')`? — bfavaretto, Aug 07 '13 at 00:12
Hi, I ran your code in chrome without any modification. It does not give me the error and its working fine. — JPS, Aug 14 '13 at 10:01
no when i am adding this page to tableau it gave me this error ..i have searched some thing but i dont know what does it suppose to mean [please go through this page and read the answer by GAgnew](http://stackoverflow.com/questions/5679355/canvas-animation-javascript-functions-and-global-variables) — user2502227, Aug 14 '13 at 15:12
I assume this happens in older IE where Canvas is not supported. Have you considered https://code.google.com/p/explorercanvas/ ? — Yuriy Galanter, Aug 19 '13 at 18:50
if (canvas !== null && canvas.getContext) when i am using this line it run successfully(by successfully i mean , it gives me error of getContex but it run anyway) but when i use if (canvas != null && canvas.getContext).then it gives me that error — user2502227, Aug 19 '13 at 18:53
and yes i have already considered it but this does not do the magic for me — user2502227, Aug 19 '13 at 18:54
What browser and version are you using when you get the error `Canvas Not Supported By Your Browser` ? The following has a matrix for browwser support of CANVAS: http://guides.instructure.com/s/2204/m/4214/l/41056-which-browsers-does-canvas-support — David Tansey, Aug 19 '13 at 20:40
You said _`when i am adding this page to tableau it gave me this error`_ What is `tableau`? — David Tansey, Aug 19 '13 at 20:42
i am using IE10 ..And Tableau is a tool for representing the data. [tableau](http://www.tableausoftware.com/business-intelligence). — user2502227, Aug 19 '13 at 20:48
It works perfectly for me http://cssdeck.com/labs/t1qtwjei I simply added brackets after the if statement and took out the unnecessary script tag — Zach Saucier, Aug 19 '13 at 22:57

user2529216 · Accepted Answer · 2013-08-20T21:25:23.723

I had checked this , I didn't get , why are you facing this problem,though i don't know about tableau much

   canvas != null && canvas.getContext

by this you are getting another error "Canvas not supported by your browser when i am dong this this error comes after the canvas is drawn. then i just delete that alert which gave me this alert message.i think you must try this ,search for this alert and see what happen next it does not effect the program and it runs fine

how to resolve the canvas not supported error

1 Answers1