User:Yoana Buzova/canvas: Difference between revisions

Revision as of 16:15, 15 October 2012

<canvas id="c" width="900" height="400" showsrc> var p;

i = 0;

function draw2(){

 c = document.getElementById("canvas"); 
 console.log("test");
 p = c.getContext("2d"); 
 p.fillStyle = "#000000";
 p.fillRect( 0, 0, 900, 400);
 p.fillStyle = "#11CCBC";

 drawBlocks();
 p.fillStyle = "#FFFF00";
 p.fillRect(12*i, 0, 12, 400);

 if(i*12>900){i=0;}
 i+=1;

}

function draw(){

 setInterval('draw2()',50);

}

function drawBlocks(){

    x = 0;
    counter = 0;

while (counter < 100) { p.fillRect(x, 0, 12 , 400); x = x + 25; counter = counter + 1;

} </canvas>

@@ Line 1: / Line 1: @@
-<canvas id="c" width="1000" height="800" showsrc>
+<canvas id="c" width="900" height="400" showsrc>
 var p;
-i = 0;
+ i = 0;
 function draw2(){
    c = document.getElementById("canvas");
+  console.log("test");
    p = c.getContext("2d");
    p.fillStyle = "#000000";
-   p.fillRect( 0, 0, 1000, 800);
+   p.fillRect( 0, 0, 900, 400);
    p.fillStyle = "#11CCBC";
    drawBlocks();
    p.fillStyle = "#FFFF00";
-   p.fillRect(12*i, 0, 12, 1000);
+   p.fillRect(12*i, 0, 12, 400);
-   if(i*12>1000){i=0;}
+   if(i*12>900){i=0;}
    i+=1;
 }
 function draw(){
-   setInterval(function(){draw2()},50);
+   setInterval('draw2()',50);
 }
@@ Line 25: / Line 26: @@
       counter = 0;
 		while (counter < 100) {
-	     p.fillRect(x, 0, 12 , 1000);
+	     p.fillRect(x, 0, 12 , 400);
 	     x = x + 25;
 	     counter = counter + 1;