Complete beginer

Hi

I'm trying to learn HTML5 and Javascript. While going threw a book, I also try to add some additional feature to their tutorials.

In the code bellow I would like to color each rectangle in a random color in still keep it moving aroung. Can you please help?

Oh, what do you use for debugging?

Code:

<!DOCTYPE html> <html> <head> <title>Learning the basics of canvas</title> <meta charset="utf-8"> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function() { var canvas = $("#myCanvas"); var context = canvas.get(0).getContext("2d"); var canvasWidth = canvas.width(); var canvasHeight = canvas.height(); //definicija tipk var playAnimation = true; var startButton = $("#startAnimation"); var stopButton = $("#stopAnimation"); stopButton.click(function() { $(this).hide(); startButton.show(); playAnimation = false; }); startButton.hide(); startButton.click(function() { $(this).hide(); stopButton.show(); playAnimation = true; animate(); }); //definicija likov var Shape = function(x, y, width, height, color) { this.x = x; this.y = y; this.width = width; this.height = height; this.color = context.fill; }; var shapes = new Array(); for (var i = 0; i < 250; i++) { var x = Math.random()*250; var y = Math.random()*250; var width = height = Math.random()*5; var color = 'rgb(' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ')'; //"rgb(Math.floor(Math.random()*255), Math.floor(Math.random()*255), Math.floor(Math.random()*255))"; //'rgb(' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ')'; shapes.push(new Shape(x, y, width, height, color)); }; //animacija function animate() { context.clearRect(0, 0, canvasWidth, canvasHeight); var shapesLength = shapes.length; for (var i = 0; i < shapesLength; i++) { var tmpShape = shapes[i]; tmpShape.x += Math.random()*4-2; tmpShape.y += Math.random()*4-2; context.fillRect(tmpShape.x, tmpShape.y, tmpShape.width, tmpShape.height, tmpShape.color); }; if (playAnimation) { setTimeout(animate, 33); }; }; animate(); }); function rdece() { var d=document.getElementById("myCanvas"); var ctx=d.getContext("2d"); //shapes.push(new Shape(150, 150, 10, 10)); ctx.fillStyle= "red"; //context.fillRect(0,0,150,75); }; function modro() { var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.fillStyle= "blue"; //ctx.fillRect(0,0,150,75); } </script> </head> <body> <canvas id="myCanvas" width="500" height="281"> </canvas> <div> <button id="startAnimation">Start</button> <button id="stopAnimation">Stop</button> <button onclick="rdece()">Rdeče</button> <button onclick="modro()">Modro</button> </div> <p id="demo"> klikni za spremembo </p> </body> </html>

In the Shape constructor function...

this.color = context.fill;

Change it to this:

this.color = color;

And in the for loop in the animate function, add this line:

context.fillStyle = tmpShape.color;

(You don't specify any color in fillRect.)

great, thank you a lot...

You'll want to familiarise yourself with the JavaScript console for debugging, as this will be where all your error messages and warnings are displayed. In Internet Explorer (version 9), press F12. For Chrome you can press Ctrl + Shift + C, for Firefox you'll need to download Firebug and once installed, press Crtl + Shift + C. For Opera you'll need to to use Ctrl + Shift + I to open Dragonfly.

For Safari, go to Edit -> Preferences -> Advanced -> "Show develop menu in menu bar". Then go to "Develop" in the menu and start debugging JavaScript.

My advice would be to simply start Googling your errors as and when they occur to give you a more practical understanding of what's happening.