User:Nicole Hametner/canvas: Difference between revisions

Revision as of 16:08, 14 October 2012

<canvas id="c1" showsrc> function draw(){

 c = document.getElementById("c1")
 //console.log("c is",c)
 p = c.getContext("2d")
 x = 10
 while (x<250) {
   p.strokeRect(x,100,20,40)
   x+=60
 }

} </canvas>

@@ Line 1: / Line 1: @@
-function draw() {
+<canvas id="c1" showsrc>
-    c = document.getElementById("c");
+function draw(){
-    p = c.getContext("2d");
+  c = document.getElementById("c1")
+  //console.log("c is",c)
-  	p.strokeStyle="rgb(0,255,0)"
+  p = c.getContext("2d")
-	p.lineWidth   = 3;
+   x = 10
-	p.shadowOffsetX = 5;
+   while (x<250) {
-	p.shadowOffsetY = 8;
+     p.strokeRect(x,100,20,40)
-	p.shadowColor   = "rgb(0, 255, 255)";
+     x+=60
+  }
-  	star=0;
-    p.beginPath();
-    while(star < 7) {
-    x = star * 90;
-    y = star * 40;
-     p.moveTo(-45+x,30+y);
-    p.lineTo(45+x,45+y);
-    p.lineTo(-35+x,90+y);
-     p.lineTo(10+x,0+y);
-    p.lineTo(35+x,105+y);
-    p.lineTo(-45+x,29+y);
-    p.stroke();
-    star=star+1;
-    }
 }
-</script>
+</canvas>
-</head>
-<body marginwidth="100" marginheight="100" onload="draw()">
-<canvas id="c" width="550" height="320" style="border: double blue 10px"></canvas>
-</body></html>