Circles

by Elazar Fein

HTML

<div class="container">
<div style="text-align: left;" class="ui-droppable"><b style="background-color: #000000;"><font color="#ffffff"><br /></font></b></div>
<canvas id="paper" width="1200" height="800" style="border: 1px solid #c3c3c3;"> Your browser does not support the HTML5 canvas tag. </canvas>
<h1>
<a href="#" class="button" id="btn-download" download="canvaShot.png">Download</a>
</h1>
<div class="form">
<h3>Press here to pick start color:</h3>
<input type="color" id="copic" name="favcolor" value="#ff0000">
</div>
<div class="form">
<h3>Change the speed here :</h3>
<form onsubmit="return false" oninput="level.value = speed.valueAsNumber">
  <label for="speed">Speed</label>
  <input type="range" id="speed" name="speed" min="1" max="200" value="10">
[min: 1]-[value:<output for="speed" name="level">10</output>]-[max: 200]
</form>
</div>
<div class="form">
<h3>Change the clear type here:</h3>
<form onsubmit="return false" oninput="clr.value = clear.valueAsNumber">
  <label for="clear">Clear</label>
  <input type="range" id="clear" name="clear" min="1" max="11" value="10">
[min: 1]-[value:<output for="clear" name="clr">10</output>]-[max: 11]
</form>
</div>
<div class="form">
<h3>Change the size range here:</h3>
<form onsubmit="return false" oninput="sran.value = sra.valueAsNumber">
  <label for="sra">Size Range</label>
  <input type="range" id="sra" name="sra" min="1" max="100" value="50">
[min: 1]-[value:<output for="sra" name="sran">50</output>]-[max: 100]
</form>
</div>
</div>

CSS

body {
  font-family: 'Francois One', sans-serif;
  font-size: 100%;
  /* whatever base font size I want */
  background-color: #000066;
}

.container > * {
  margin-left: 30px;
}

.container > form {
  padding-bottom: 30px;
}

#paper {
  margin-top: 5px;
  margin-bottom: -10px;
  margin-right: 0px;
  margin-left: 30px;
}

.container {
  width: 1265px;
  padding-bottom: 20px;
  color: #ddd;
  background-color: #000080;
}

div.form {
  background-color: #3366ff;
  padding-top: 5px;
  padding-bottom: 10px;
  padding-left: 10px;
  margin-bottom: 10px;
  margin-left: 30%;
  border-left: 10px solid blue;
  width: 35%;
}

input {
  font-size: 26px;
}

input[type=text] {
  font-size: 35px;
  padding: 5px 5px;
}

input[type=range] {
  -webkit-appearance: none;
}

input[type=range]::-webkit-slider-runnable-track {
  width: 400px;
  height: 5px;
  background: #b3ccff;
  border: none;
  border-radius: 5px;
}

input[type=range]:focus::-webkit-slider-thumb {
  background: #4d4dff;
}

input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  border: none;
  height: 20px;
  width: 20px;
  border-radius: 50%;
  background: blue;
  margin-top: -7.5px;
}

input[type=range]:focus {
  outline: none;
}

input[type=range]:focus::-webkit-slider-runnable-track {
  background: #e6eeff;
}

input[type=color] {
  width: 97%;
  height: 30px;
}

.button {
  display: inline-block;
  text-align: center;
  vertical-align: middle;
  padding: 10px 525px;
  border: 5px solid #030038;
  border-radius: 10px;
  background: #006fff;
  background: -webkit-gradient(linear, left top, left bottom, from(#006fff), to(#002ec7));
  background: -moz-linear-gradient(top, #006fff, #002ec7);
  background: linear-gradient(to bottom, #006fff, #002ec7);
  text-shadow: #591717 1px 1px 1px;
  font: normal normal normal 30px impact;
  color: #ffffff;
  text-decoration: none;
}

.button:hover,
.button:focus {
  border: 5px solid #0f00ff;
  background: #0085ff;
  background: -webkit-gradient(linear, left...

JavaScript

var act = false;
var ca = document.getElementById("paper");
var c = ca.getContext("2d");
var button = document.getElementById('btn-download');
button.addEventListener('click', function (e) {
    var dataURL = ca.toDataURL('image/png');
    button.href = dataURL;
});
function Start() {

            var x = ca.width / 2;
            var y = ca.height / 2;
            var r = 5;

		
            //c.fillStyle = "black";
            //c.fillStyle = "rgba(255, 255, 255,0.1)";
            //c.fillRect(0, 0, ca.width, ca.height);

	    function comToHex(c) {
    		var hex = c.toString(16);
    		return hex.length == 1 ? "0" + hex : hex;
            }
	    
	    function text(c,back,fore,x ,y,text){
		
    		c.fillStyle = back;
        	c.fillText(text, x, y+1);
        	c.fillText(text, x, y-1);
        	c.fillText(text, x+1, y);
        	c.fillText(text, x-1, y);
        
        	c.fillStyle = fore;
        	c.fillText(text, x, y);
    	    }


		var xo = x;
		var yo = y;
		var ro = r;
		           	xo=Math.floor((Math.random() * x*2) + 0);
           			yo=Math.floor((Math.random() * y*2) + 0);
           			sr = document.getElementById("sra").value;
           			ro=Math.floor((Math.random() * sr) + 1);
           			var co = document.getElementById("copic").value;
           			co.toString();

           			c.lineWidth = "1";
                	c.strokeStyle = co;
                    c.beginPath();
                    c.arc(xo, yo, ro, 0, 2 * Math.PI);
                    c.stroke();
                	c.fillStyle = co;
                	c.fill();
           /*setInterval(function () {

            }, document.getElementById("speed").value);;*/

}

setInterval(function () {
		for (var i = 0; i < document.getElementById("speed").value; i++) {
			Start();
		};
		
        sp = document.getElementById("speed").value;
        cl = document.getElementById("clear").value;

        if(cl == 11){
        	c.fillStyle = "rgb(0, 0, 0)";
        }else{
        	c.fillStyle =...