javascript - Canvas not showing -
i've followed tutorials regarding creating canvas, not working , neither rectangle drawn on it. necessity have script in <head>? appreciated!
here's jsfiddle code.
<!doctype html> <html> <head> <title>simple animations in html5</title> </head> <body> <h2> optical illusion </h2> <video id="illusion" width="640" height="480" controls> <source src="illusion_movie.ogg"> </video> <div id="buttonbar"> <button onclick="changesize()">big/small</button> </div> <p> watch animation 1 minute, staring @ centre of image. @ else near you. few seconds appear distort. source: <a href="http://en.wikipedia.org/wiki/file:illusion_movie.ogg">wikipedia:illusion movie</a> </p> <script> var myvideo=document.getelementbyid("illusion"); var littlesize = false; function changesize() { myvideo.width = littlesize ? 800 : 400; littlesize = !littlesize;//toggle boolean } </script> <canvas id= "mycanvas " width= "500 " height= "500 "> style="border:1px solid #000000;"> </canvas> <script> var canvas = document.getelementbyid("mycanvas"); var context = canvas.getcontext("2d"); context.fillstyle = "blue"; context.fillrect(20, 50, 200, 100); </script> </body> </html>
i've cleaned code had few spaces causing problems.
when use script tag set type attribute:
<script type="text/javascript"> // code here </script> here's corrected fiddle: http://jsfiddle.net/8bk4y/
edit: pointed out below type attribute not needed html5 doctype.
Comments
Post a Comment