Note that there are some explanatory texts on larger screens.

plurals
  1. POCanvas not showing
    primarykey
    data
    text
    <p>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 <code>&lt;head&gt;</code>? Any help would be appreciated!</p> <p>Here's a <a href="http://jsfiddle.net/3Y8XV/" rel="nofollow">JSFiddle</a> with my code.</p> <pre><code>&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;Simple animations in HTML5&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;h2&gt; Optical Illusion &lt;/h2&gt; &lt;video id="illusion" width="640" height="480" controls&gt; &lt;source src="Illusion_movie.ogg"&gt; &lt;/video&gt; &lt;div id="buttonbar"&gt; &lt;button onclick="changeSize()"&gt;Big/Small&lt;/button&gt; &lt;/div&gt; &lt;p&gt; 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: &lt;a href="http://en.wikipedia.org/wiki/File:Illusion_movie.ogg"&gt;Wikipedia:Illusion movie&lt;/a&gt; &lt;/p&gt; &lt;script&gt; var myVideo=document.getElementById("illusion"); var littleSize = false; function changeSize() { myVideo.width = littleSize ? 800 : 400; littleSize = !littleSize;//toggle boolean } &lt;/script&gt; &lt;canvas id= "myCanvas " width= "500 " height= "500 "&gt; style="border:1px solid #000000;"&gt; &lt;/canvas&gt; &lt;script&gt; var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d"); context.fillStyle = "blue"; context.fillRect(20, 50, 200, 100); &lt;/script&gt; &lt;/body&gt; &lt;/html&gt; </code></pre>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload