<!DOCTYPE html>
<html>
<body>
<h1> Random Dots</h1>
<h3>Or a Very Bad Automated <a href="https://en.wikipedia.org/wiki/The_Starry_Night">van Gogh</a></h3>
<script>
var WIDTH = 300;
var HEIGHT = 300;
var canvas = document.createElement('canvas')
canvas.height = HEIGHT;
canvas.width = WIDTH;
canvas.style = "border:1px";
document.body.appendChild(canvas);
var CTX = canvas.getContext("2d");
function RandomPattern() {
var i; // a loop control variable.
var x,y; // random coordinates.
var r,g,b; // random red, green and blue color components.
var color; // the color string
CTX.fillStyle="#cccccc";
CTX.fillRect(0,0,WIDTH,HEIGHT);
for(i=0;i<100;i++) {
// generate a random color
r = Math.floor(Math.random()*255);
g = Math.floor(Math.random()*255);
b = Math.floor(Math.random()*255);
color = "rgb("+r+","+g+","+b+")";
CTX.fillStyle = color;
// and a random point.
x = Math.random()*WIDTH;
y = Math.random()*HEIGHT;
// draw the point
CTX.fillRect(x, y, 2, 2);
}
return;
}
RandomPattern();