ecounysis · May 13, 2014 22:53
diff --git a/index.html b/index.html
 <html>
  <head>
    <title>Canvas tutorial</title>
    

  </head>
  <body>
    <canvas id="tutorial" width="1000" height="700"></canvas>
 <script type="text/javascript">
      var can=document.getElementById("tutorial");
      var ctx=can.getContext("2d");
      var step=8;
      var rd = 0.5;
      var gr = 0.5;
      var bl = 0.5;
      var draw=function() {
        for(var x=0; x<can.width; x+=step) {
          for (var y=0;y<can.height; y+=step) {
             var rnd1=Math.floor((Math.random() * 255));
             var rnd2=Math.floor((Math.random() * 255));
             var rnd3=Math.floor((Math.random() * 255));
             /*
             var r1=Math.random();
             var r2=Math.random();
             var r3=Math.random();
             
             if (r1<0.5 && rd>0) rd-=0.01;
             if (r2<0.5 && gr>0) gr-=0.01;
             if (r3<0.5 && bl>0) bl-=0.01;
             if (r1>0.5 && rd<1) rd+=0.01;
             if (r2>0.5 && gr<1) gr+=0.01;
             if (r3>0.5 && bl<1) bl+=0.01;
 	     */			    
 	     var red0=Math.floor(rnd1);
             var green0=Math.floor(rnd2);
             var blue0=Math.floor(rnd3);
             ctx.fillStyle = "rgb("+red0+","+green0+","+blue0+")";  
             ctx.fillRect(x,y,step,step);
             
          }
        }
      };

      var on=1;			
      var to=window.setInterval(draw, 60);
      document.getElementById("tutorial").onclick = function() { 
                 if (on===1) {
                    clearInterval(to); 
                    on=0;
                 } 
                 else { 
                   to=window.setInterval(draw, 60); 
                 on=1}
      };

  </script>
  </body>
 </html>
	<html>
	<head>
	<title>Canvas tutorial</title>


	</head>
	<body>
	<canvas id="tutorial" width="1000" height="700"></canvas>
	<script type="text/javascript">
	var can=document.getElementById("tutorial");
	var ctx=can.getContext("2d");
	var step=8;
	var rd = 0.5;
	var gr = 0.5;
	var bl = 0.5;
	var draw=function() {
	for(var x=0; x<can.width; x+=step) {
	for (var y=0;y<can.height; y+=step) {
	var rnd1=Math.floor((Math.random() * 255));
	var rnd2=Math.floor((Math.random() * 255));
	var rnd3=Math.floor((Math.random() * 255));
	/*
	var r1=Math.random();
	var r2=Math.random();
	var r3=Math.random();

	if (r1<0.5 && rd>0) rd-=0.01;
	if (r2<0.5 && gr>0) gr-=0.01;
	if (r3<0.5 && bl>0) bl-=0.01;
	if (r1>0.5 && rd<1) rd+=0.01;
	if (r2>0.5 && gr<1) gr+=0.01;
	if (r3>0.5 && bl<1) bl+=0.01;
	*/
	var red0=Math.floor(rnd1);
	var green0=Math.floor(rnd2);
	var blue0=Math.floor(rnd3);
	ctx.fillStyle = "rgb("+red0+","+green0+","+blue0+")";
	ctx.fillRect(x,y,step,step);

	}
	}
	};

	var on=1;
	var to=window.setInterval(draw, 60);
	document.getElementById("tutorial").onclick = function() {
	if (on===1) {
	clearInterval(to);
	on=0;
	}
	else {
	to=window.setInterval(draw, 60);
	on=1}
	};

	</script>
	</body>
	</html>