Does firefox4 not support canvas yet?_问答_开发者

开发者 https://www.devze.com 2023-03-12 08:43 出处：网络

I tried the following code but fi开发者_运维技巧refox4 does not display me anything.. <script type=\"text/javascript\">

I tried the following code but fi开发者_运维技巧refox4 does not display me anything..

<script type="text/javascript">

var canvas = document.getElementById('canvas1');

var context = canvas.getContext('2d');
context.strokeStyle = '#990000';
context.strokeRect(20,30,100,50);
alert(context);
</script>

 <canvas id="canvas1" width="200px" height="200px">Your browser does not   support canvas </canvas>

This code is inside body tag.

you have to understand the order in which the file is executed by the browser. Here is the way in which the browser is reading this code:

<script type="text/javascript">

var canvas = document.getElementById('canvas1');

var context = canvas.getContext('2d');
context.strokeStyle = '#990000';
context.strokeRect(20,30,100,50);
alert(context);
</script>

 <canvas id="canvas1" width="200px" height="200px">Your browser does not   support canvas </canvas>

Body tag begins
Script tag begins
Find element with ID canvas1
Canvas1 Does not exist, save canvas as null(i take as nothing)
Context = nothing.getContext('2d');
alert(nothing)
End Script
Begin Canvas, since supported dont show what is inside
end body tag

So to make it visible you just have to edit your code like this:-

<!DOCTYPE HTML>
<html>
<head>
 <title>Sample by RHNVRM(aka rohan verma)</title>
</head>
<body>
<!--Canvas-->
 <canvas id="canvas1" width="200px" height="200px">Your browser does not   support canvas </canvas>
<!--Begin Script-->
<script>

var canvas = document.getElementById('canvas1');

var context = canvas.getContext('2d');
context.strokeStyle = '#990000';
context.strokeRect(20,30,100,50);
alert(context);
</script>
</body>
</html>

NOTE: When using Javascript there is no need to mention it in HTML5.

According to this search http://www.google.co.uk/search?q=firefox4+canvas firefox 4 supports canvas.

This worked fine for me:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
</head>
<canvas id="canvas1" width="200px" height="200px">Your browser does not   support canvas </canvas>

<script type="text/javascript">

var canvas = document.getElementById('canvas1');

var context = canvas.getContext('2d');
context.strokeStyle = '#990000';
context.strokeRect(20,30,100,50);
alert(context);
</script>
<body>
</body>
</html>