Skip to content

@kastner /forb.html
Created

Embed URL

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.