Canvas not showing
canvas, javascript
Solution
I've cleaned up your code you had a few spaces that were causing problems.
Also when you use the script tag set the type attribute:
<script type="text/javascript">
// your code here
</script>
Here's a corrected Fiddle: http://jsfiddle.net/8bK4y/
Edit: As pointed out below type attribute is not needed for the HTML5 Doctype.
Problem
I've followed tutorials regarding creating a canvas, however it is not working and neither is the rectangle drawn on it. Is it a necessity to have the script in the `<head>`? Any help would be appreciated! Here's a JSFiddle with my 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 the animation for 1 minute, staring at the centre of the image. Then look at something else near you. For a few seconds everything will appear to 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> ```