kastner/forb.html

## forb.html
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript" charset="utf-8"></script>
    <style type="text/css" media="screen">
        body {
            background:;
        }
        canvas {
            border: 1px solid #CFCFCF;
            background: #FFFAEB;
            display: block;
        }
        #tools {
            margin: 0;
            padding: 0;
        }
        #tools ul {
            list-style: none;
            float: left;
            margin: 0;
            padding: 2px;
        }
        #tools ul.active {
            background: #CFCFCF;
        }
    </style>
</head>
<body>
<canvas id="draw" width="500" height="500"></canvas>
<ul id="tools"></ul>
</ul>
<script>
    var shapes = [];

    function findShape(name) {
        for (shape in shapes) {
            if (shapes[shape].name == name) {
                return shapes[shape];
            }
        }
    }

    var shape = function(spec) {
        var that = {};

        that.draw = function(options) {
            options.ctx.strokeStyle = options.color;
            options.ctx.fillStyle = options.color;
            options.ctx.beginPath();

            spec.draw(options);

            options.ctx.closePath();
            options.ctx.stroke();
            options.ctx.fill();
        }

        that.name = spec.name || "unknown";

        return that;
    }

    shapes.push(shape({
        name: "triangle",
        draw: function(o) {
            o.ctx.moveTo(o.x, o.y - o.size);
            o.ctx.lineTo(o.x - o.size, o.y + o.size);
            o.ctx.lineTo(o.x + o.size, o.y + o.size);
        }
    }));

    shapes.push(shape({
        name: "square",
        draw: function(o) {
            o.ctx.rect(o.x - o.size / 2, o.y - o.size / 2, o.size, o.size);
        }
    }));

    shapes.push(shape({
        name: "diamond",
        draw: function(o) {
            o.ctx.moveTo(o.x, o.y - o.size);
            o.ctx.lineTo(o.x - o.size / 2, o.y);
            o.ctx.lineTo(o.x, o.y + o.size);
            o.ctx.lineTo(o.x + o.size / 2, o.y);
        }
    }));

    shapes.push(shape({
        name: "heart",
        draw: function(o) {
            var s = o.size;
            var x = o.x;
            var y = o.y;
            o.ctx.moveTo(x, y - s / 1.8);
            o.ctx.bezierCurveTo(x,         y - s * 1.25, x - s,     y - s * 1.25, x - s, y - s / 1.8);
            o.ctx.bezierCurveTo(x - s,     y - s / 5,    x - s / 2, y,            x,     y + s);
            o.ctx.bezierCurveTo(x + s / 2, y,            x + s,     y - s / 5,    x + s, y - s / 1.8);
            o.ctx.bezierCurveTo(x + s,     y - s * 1.25, x,         y - s * 1.25, x,     y - s / 1.8);
        }
    }));

    shapes.push(shape({
        name: "circle",
        draw: function(o) {
            o.ctx.arc(o.x, o.y, o.size, 0, Math.PI * 2, true);
        }
    }));

    var activeShape = shapes[0];
    var mouseDown = false;

    document.onmousedown = function(evt) { mouseDown = true; }

    document.onmouseup = function(evt) { mouseDown = false; }

    function drawIt(evt) {
        var options = {
            ctx: this.getContext("2d"),
            x: evt.pageX - $(this).offset().left,
            y: evt.pageY - $(this).offset().top,
            size: randomNumber(30),
            color: randomColor()
        };

        activeShape.draw(options);
    }

    document.getElementById("draw").onmousedown = function(evt) {
        drawIt.call(this, evt);
    }

    document.getElementById("draw").onmousemove = function(evt) {
        if (! mouseDown) {
            return;
        }
        drawIt.call(this, evt);
    };

    function randomColor() {
        var red = randomHex();
        var green = randomHex();
        var blue = randomHex();

        return red + green + blue;
    }

    function randomHex() {
        return randomNumber(256).toString(16);
    }

    function randomNumber(max) {
        return Math.floor(Math.random() * max);
    }

    for (var i = 0; i < shapes.length; i++) {
        var shape = shapes[i];
        var ul = document.createElement("ul");
        var canvas = document.createElement("canvas");

        $(ul).attr("data-shape", shape.name);
        canvas.height = 80;
        canvas.width = 80;
        ul.appendChild(canvas);
        document.getElementById("tools").appendChild(ul);

        shapes[i].draw({
            ctx: canvas.getContext("2d"),
            x: 40,
            y: 40,
            size: 30,
            color: randomColor()
        });

        ul.onclick = function() {
            activeShape = findShape($(this).attr("data-shape"));
            $("#tools ul").removeClass("active");
            $(this).addClass("active");
        }
    }

    $("#tools ul:first-child").click();
</script>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript" charset="utf-8"></script>
	<style type="text/css" media="screen">
	body {
	background:;
	}
	canvas {
	border: 1px solid #CFCFCF;
	background: #FFFAEB;
	display: block;
	}
	#tools {
	margin: 0;
	padding: 0;
	}
	#tools ul {
	list-style: none;
	float: left;
	margin: 0;
	padding: 2px;
	}
	#tools ul.active {
	background: #CFCFCF;
	}
	</style>
	</head>
	<body>
	<canvas id="draw" width="500" height="500"></canvas>
	<ul id="tools"></ul>
	</ul>
	<script>
	var shapes = [];

	function findShape(name) {
	for (shape in shapes) {
	if (shapes[shape].name == name) {
	return shapes[shape];
	}
	}
	}

	var shape = function(spec) {
	var that = {};

	that.draw = function(options) {
	options.ctx.strokeStyle = options.color;
	options.ctx.fillStyle = options.color;
	options.ctx.beginPath();

	spec.draw(options);

	options.ctx.closePath();
	options.ctx.stroke();
	options.ctx.fill();
	}

	that.name = spec.name \|\| "unknown";

	return that;
	}

	shapes.push(shape({
	name: "triangle",
	draw: function(o) {
	o.ctx.moveTo(o.x, o.y - o.size);
	o.ctx.lineTo(o.x - o.size, o.y + o.size);
	o.ctx.lineTo(o.x + o.size, o.y + o.size);
	}
	}));

	shapes.push(shape({
	name: "square",
	draw: function(o) {
	o.ctx.rect(o.x - o.size / 2, o.y - o.size / 2, o.size, o.size);
	}
	}));

	shapes.push(shape({
	name: "diamond",
	draw: function(o) {
	o.ctx.moveTo(o.x, o.y - o.size);
	o.ctx.lineTo(o.x - o.size / 2, o.y);
	o.ctx.lineTo(o.x, o.y + o.size);
	o.ctx.lineTo(o.x + o.size / 2, o.y);
	}
	}));

	shapes.push(shape({
	name: "heart",
	draw: function(o) {
	var s = o.size;
	var x = o.x;
	var y = o.y;
	o.ctx.moveTo(x, y - s / 1.8);
	o.ctx.bezierCurveTo(x, y - s * 1.25, x - s, y - s * 1.25, x - s, y - s / 1.8);
	o.ctx.bezierCurveTo(x - s, y - s / 5, x - s / 2, y, x, y + s);
	o.ctx.bezierCurveTo(x + s / 2, y, x + s, y - s / 5, x + s, y - s / 1.8);
	o.ctx.bezierCurveTo(x + s, y - s * 1.25, x, y - s * 1.25, x, y - s / 1.8);
	}
	}));

	shapes.push(shape({
	name: "circle",
	draw: function(o) {
	o.ctx.arc(o.x, o.y, o.size, 0, Math.PI * 2, true);
	}
	}));

	var activeShape = shapes[0];
	var mouseDown = false;

	document.onmousedown = function(evt) { mouseDown = true; }

	document.onmouseup = function(evt) { mouseDown = false; }

	function drawIt(evt) {
	var options = {
	ctx: this.getContext("2d"),
	x: evt.pageX - $(this).offset().left,
	y: evt.pageY - $(this).offset().top,
	size: randomNumber(30),
	color: randomColor()
	};

	activeShape.draw(options);
	}

	document.getElementById("draw").onmousedown = function(evt) {
	drawIt.call(this, evt);
	}

	document.getElementById("draw").onmousemove = function(evt) {
	if (! mouseDown) {
	return;
	}
	drawIt.call(this, evt);
	};

	function randomColor() {
	var red = randomHex();
	var green = randomHex();
	var blue = randomHex();

	return red + green + blue;
	}

	function randomHex() {
	return randomNumber(256).toString(16);
	}

	function randomNumber(max) {
	return Math.floor(Math.random() * max);
	}

	for (var i = 0; i < shapes.length; i++) {
	var shape = shapes[i];
	var ul = document.createElement("ul");
	var canvas = document.createElement("canvas");

	$(ul).attr("data-shape", shape.name);
	canvas.height = 80;
	canvas.width = 80;
	ul.appendChild(canvas);
	document.getElementById("tools").appendChild(ul);

	shapes[i].draw({
	ctx: canvas.getContext("2d"),
	x: 40,
	y: 40,
	size: 30,
	color: randomColor()
	});

	ul.onclick = function() {
	activeShape = findShape($(this).attr("data-shape"));
	$("#tools ul").removeClass("active");
	$(this).addClass("active");
	}
	}

	$("#tools ul:first-child").click();
	</script>
	</html>