Random Dots

Or a Very Bad Automated van Gogh

betterDots.html

 
<!DOCTYPE html>
<html>
<head>
   <script type="text/javascript" src="canvasTools.js"> </script>
</head>
<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 ctx = MakeCanvas(WIDTH, HEIGHT);

RandomPattern(ctx);
</script>

<p>
<button type="button" id="Redraw" onclick="RandomPattern(ctx)">Redraw</button>
</body>
</html>

canvasTools.js

 
// creates a canvas in the page.
//    This assumes that there will "be only one" canvas. 

function MakeCanvas(width, height) {
    var canvas = document.createElement('canvas')
        canvas.height = height;
        canvas.width = width;

    document.body.appendChild(canvas);

    var ref={"width":width, "height":height, "ctx": canvas.getContext("2d")}
    return ref;
}

function RandomPattern(canvasRef) {
    var i;
    var x,y;
    var r,g,b;
    var color;

    canvasRef.ctx.fillStyle="#cccccc";
    canvasRef.ctx.fillRect(0,0,canvasRef.width,canvasRef.height);

    for(i=0;i<100;i++) {
        r = Math.floor(Math.random()*255);
        g = Math.floor(Math.random()*255);
        b = Math.floor(Math.random()*255);

        color = "rgb("+r+","+g+","+b+")";
        canvasRef.ctx.fillStyle = color;

        x = Math.random()*canvasRef.width;
        y = Math.random()*canvasRef.height;
        canvasRef.ctx.fillRect(x, y, 2, 2);
    }
    return;
}