All geek questions in one place

Canvas not showing

I followed textbooks on creating a canvas, however it doesn’t work, and not one of them is painted on it. Do I need to have a script in <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>
+4
source share
2 answers

I cleaned 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>

Strike>

Here's the corrected script: http://jsfiddle.net/8bK4y/

Edit: As indicated below, the type attribute is not needed for Doctype HTML5.

+2
source

I think you need to remove the ">" and also remove the extra spaces

 <canvas id= "myCanvas " width= "500 " height= "500 "> style="border:1px solid #000000;"> </canvas>

to become that way

 <canvas id="myCanvas" width="500" height="500" style="border: 1px solid #000000;"> </canvas>
+2
source

Source: https://habr.com/ru/post/1478892/

More articles:


All Articles