unfortunatelly there is nothing one can do. Your browser just doesn't support canvas.
Here's how you can handle the situation
var canvas = document.getElementById('myCanvas');
if (canvas.getContext){
var ctx = canvas.getContext('2d');
// drawing code here
} else {
// canvas-unsupported code here
}
Please "Mark As Answer" if the post helped you.
mitja.gti | www.mitjagti.com
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">Canvas not supporte
</canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var grd = ctx.createLinearGradient(0, 0, 175, 50);
grd.addColorStop(0, "#000000");
grd.addColorStop(1, "#00FF00");
ctx.fillStyle=grd;
ctx.fillRect(0,0,150,75);
</script>
</body>
</html>
Html5 canval element will work only in latest browsers. Ie 8 does not support this feature
In your example :
<canvas id="mycanvas" height="30px" width="30px" runat="server" style="background-color:Lime"></canvas>
replace by below
<canvas id="mycanvas" height="50px" width="175px" style="background-color:Lime"></canvas>
you have to remove the runat="server".
karthikNc
Member
1 Points
19 Posts
Java script for HTML5 Canvas
Jul 27, 2012 05:43 PM|LINK
Hello,
I am new to Jscript. When I add some code in Java script like
<script type="text/javascript">
var canvas = document.getElementById("mycanvas");
var ctx = canvas.getContext("2d");
var grd = ctx.createLinearGradient(0, 0, 175, 50);
grd.addColorStop(0, "#FF0000");
grd.addColorStop(1, "#00FF00");
ctx.fillStyle = grd;
ctx.fillRect(0, 0, 175, 50);
</script>
<canvas id="mycanvas" height="30px" width="30px" runat="server" style="background-color:Lime"></canvas>
when I add the above code it is saying that
ctx has a null reference , canvas.getContext is not supported, it seems this canvas has no getcontext method.
Can you please help me with the issue.
Thanks
sumitd
Star
12168 Points
2151 Posts
Re: Java script for HTML5 Canvas
Jul 27, 2012 05:52 PM|LINK
You need to use the browser which supports HTML like IE9.
Visit: www.msblogdirectory.com
www.dotnetspeaks.com
mitja.GTI
Star
11157 Points
2094 Posts
Re: Java script for HTML5 Canvas
Jul 27, 2012 05:53 PM|LINK
Hi karthikNc
unfortunatelly there is nothing one can do. Your browser just doesn't support canvas.
Here's how you can handle the situation
var canvas = document.getElementById('myCanvas'); if (canvas.getContext){ var ctx = canvas.getContext('2d'); // drawing code here } else { // canvas-unsupported code here }mitja.gti | www.mitjagti.com
roopeshreddy
All-Star
20155 Points
3328 Posts
Re: Java script for HTML5 Canvas
Jul 27, 2012 06:01 PM|LINK
Hi,
Modernizer.js is a great javascript library to test whether the feature suported by the browser or not. It also allows to have a fallback method!
http://modernizr.com/
Hope it helps u...
Roopesh Reddy C
Roopesh's Space
karthikNc
Member
1 Points
19 Posts
Re: Java script for HTML5 Canvas
Jul 27, 2012 06:59 PM|LINK
sumitd,
I checked with my browser its working... Here again I got a runtime error like
Unable to set value of the property 'getContext': object is null or undefined. for the above code...
karthikNc
Member
1 Points
19 Posts
Re: Java script for HTML5 Canvas
Jul 27, 2012 07:01 PM|LINK
mitja.GTI,
First of all in order to write
karthikNc
Member
1 Points
19 Posts
Re: Java script for HTML5 Canvas
Jul 27, 2012 07:03 PM|LINK
roopeshreddy,
yes I checked with modernizer and my browser is working.. but I am getting runtime error like
Unnics
Member
394 Points
93 Posts
Re: Java script for HTML5 Canvas
Jul 27, 2012 07:45 PM|LINK
Hi, Try this
<!DOCTYPE html> <html> <body> <canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">Canvas not supporte </canvas> <script type="text/javascript"> var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); var grd = ctx.createLinearGradient(0, 0, 175, 50); grd.addColorStop(0, "#000000"); grd.addColorStop(1, "#00FF00"); ctx.fillStyle=grd; ctx.fillRect(0,0,150,75); </script> </body> </html>Hope this helps
karthikNc
Member
1 Points
19 Posts
Re: Java script for HTML5 Canvas
Jul 27, 2012 09:20 PM|LINK
Unnics,
hello I am using a master page so there will be
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
so how can i use
when there is <asp:content>?and when I write c.getContext("2D"); I am not able to get intellisense for getcontext.....roopeshreddy
All-Star
20155 Points
3328 Posts
Re: Java script for HTML5 Canvas
Jul 28, 2012 02:49 AM|LINK
Hi,
Since you have specified runat="server" , then you can try the following code!
var c=document.getElementById("<%=myCanvas.ClientID%>"); var ctx=c.getContext("2d");Hope it helps u...
Roopesh Reddy C
Roopesh's Space