hitode909/canvas1.html

## canvas1.html
<html>
  <head>
    <script type="text/javascript">
    Painter = {
        draw: function(to) {
            for(var x=0; x<16; x++) {
                for(var y=0; y<16; y++) {
                    this.plot([x,y], this.color());
                }
            }
        },
        color: function(num) {
            if (!this.colors) {
                var colors = [];
                for (var i=0; i<8; i++) {
                    colors.push(
                        ('00' + i.toString(2)).substr(-3,3).split('').map(
                            function(i) {return i*255;}
                        )
                    );
                }
                this.colors = colors;
            }
            if (typeof(num) == 'undefined') {
                num = Math.floor(Math.random() * this.colors.length);
            }
            return this.colors[num];
        },
        canvas: function() {
            return document.getElementById('canvas').getContext('2d');
        },
        plot: function(xy, rgb) {
            var c = this.canvas();
            var scale = this.scale;
            var color = 'rgb('+rgb.join(',')+')';
            c.fillStyle = color;
            c.fillRect(xy[0]*scale,xy[1]*scale,scale,scale);
        },
        scale: 5
    };
    setInterval("Painter.draw()", 50);
    </script>
  </head>
  <body>
    <canvas id="canvas" width="80" height="80"></canvas>
  </body>
</html>
	<html>
	<head>
	<script type="text/javascript">
	Painter = {
	draw: function(to) {
	for(var x=0; x<16; x++) {
	for(var y=0; y<16; y++) {
	this.plot([x,y], this.color());
	}
	}
	},
	color: function(num) {
	if (!this.colors) {
	var colors = [];
	for (var i=0; i<8; i++) {
	colors.push(
	('00' + i.toString(2)).substr(-3,3).split('').map(
	function(i) {return i*255;}
	)
	);
	}
	this.colors = colors;
	}
	if (typeof(num) == 'undefined') {
	num = Math.floor(Math.random() * this.colors.length);
	}
	return this.colors[num];
	},
	canvas: function() {
	return document.getElementById('canvas').getContext('2d');
	},
	plot: function(xy, rgb) {
	var c = this.canvas();
	var scale = this.scale;
	var color = 'rgb('+rgb.join(',')+')';
	c.fillStyle = color;
	c.fillRect(xy[0]scale,xy[1]scale,scale,scale);
	},
	scale: 5
	};
	setInterval("Painter.draw()", 50);
	</script>
	</head>
	<body>
	<canvas id="canvas" width="80" height="80"></canvas>
	</body>
	</html>