<html>
<head>
<meta name="description" content="[add your bin description]" />
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<canvas id="canvas" width="800px" height="500px"></canvas>
</body>
</html>
canvas {
border: 0px;
}
/*
solution for:
http://i.imgur.com/CuzTPTR.gif
by @msvaljek
*/
var canvas = document.getElementById('canvas'),
ctx = canvas.getContext('2d'),
cwidth = canvas.width,
cheight = canvas.height,
hsplit = 90,
circlewidth = 80,
circlehalf = circlewidth / 2,
circlex = cwidth / 2,
circley = cheight - hsplit + circlehalf,
angle = 0,
dangle = -0.0256,
anglex,
angley,
drawdotx,
drawdoty,
linex,
draw;
draw = function () {
ctx.clearRect(0, 0, cwidth, cheight);
ctx.strokeStyle = 'black';
// vertical split
ctx.lineWidth = 1;
ctx.beginPath();
ctx.moveTo(circlex, cheight);
ctx.lineTo(circlex, 0);
ctx.stroke();
// horizontal split
ctx.lineWidth = 1;
ctx.beginPath();
ctx.moveTo(0, cheight - hsplit);
ctx.lineTo(cwidth, cheight - hsplit);
ctx.stroke();
//circle
ctx.lineWidth = 1;
ctx.beginPath();
ctx.arc(circlex, circley, circlehalf, 0, 2 * Math.PI);
ctx.stroke();
//circle center
ctx.lineWidth = 2;
ctx.beginPath();
ctx.arc(circlex, circley, 1, 0, 2 * Math.PI);
ctx.stroke();
angle = (angle + dangle) % ( 2 * Math.PI);
anglex = Math.cos(angle) * circlehalf;
angley = Math.sin(angle) * circlehalf;
drawdotx = circlex + anglex;
drawdoty = circley + angley;
linex = circlehalf / Math.tan(angle);
linex2 = circlehalf / Math.tan(angle + Math.PI);
//first line part
ctx.lineWidth = 1;
ctx.beginPath();
ctx.moveTo(circlex, circley);
ctx.lineTo(circlex - linex, cheight - hsplit);
ctx.stroke();
//green dot
ctx.strokeStyle = 'green';
ctx.lineWidth = 3;
ctx.beginPath();
ctx.arc(drawdotx, drawdoty, 1, 0, 2 * Math.PI);
ctx.stroke();
//black dot
ctx.strokeStyle = 'black';
ctx.lineWidth = 3;
ctx.beginPath();
ctx.arc(circlex - linex, cheight - hsplit, 1, 0, 2 * Math.PI);
ctx.stroke();
//secondlinepart
ctx.lineWidth = 1;
ctx.beginPath();
ctx.moveTo(circlex, circley);
ctx.lineTo(circlex + linex2, cheight - hsplit + circlewidth);
ctx.stroke();
for (var i = cheight; i > 0; i-- ) {
ctx.beginPath();
ctx.moveTo(circlex - linex, cheight - hsplit - i - 1);
linex = circlehalf / Math.tan(angle - i * dangle);
ctx.lineTo(circlex - linex, cheight - hsplit - i);
if ((circlex - linex) < cwidth) {
ctx.stroke();
}
}
};
setInterval(draw, 10);
Output
You can jump to the latest bin by adding /latest
to your URL
Keyboard Shortcuts
Shortcut | Action |
---|---|
ctrl + [num] | Toggle nth panel |
ctrl + 0 | Close focused panel |
ctrl + enter | Re-render output. If console visible: run JS in console |
Ctrl + l | Clear the console |
ctrl + / | Toggle comment on selected lines |
ctrl + ] | Indents selected lines |
ctrl + [ | Unindents selected lines |
tab | Code complete & Emmet expand |
ctrl + shift + L | Beautify code in active panel |
ctrl + s | Save & lock current Bin from further changes |
ctrl + shift + s | Open the share options |
ctrl + y | Archive Bin |
Complete list of JS Bin shortcuts |
JS Bin URLs
URL | Action |
---|---|
/ | Show the full rendered output. This content will update in real time as it's updated from the /edit url. |
/edit | Edit the current bin |
/watch | Follow a Code Casting session |
/embed | Create an embeddable version of the bin |
/latest | Load the very latest bin (/latest goes in place of the revision) |
/[username]/last | View the last edited bin for this user |
/[username]/last/edit | Edit the last edited bin for this user |
/[username]/last/watch | Follow the Code Casting session for the latest bin for this user |
/quiet | Remove analytics and edit button from rendered output |
.js | Load only the JavaScript for a bin |
.css | Load only the CSS for a bin |
Except for username prefixed urls, the url may start with http://jsbin.com/abc and the url fragments can be added to the url to view it differently. |