<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<p>
This canvas demonstrates creating basic shapes and fills including gradients, enhancing the drawing using JavaScript loop and random functions:
</p>
<canvas id="moonPic" width="500" height="400">
<!--default content for fallback in case no canvas support-->
Whoops! Your browser doesn't support the canvas element...
</canvas>
<!--script could be in head section called on event-->
<script type="text/javascript">
var moonCanvas = document.getElementById("moonPic");
var moonContext = moonCanvas.getContext("2d");
//background gradient
var skyGradient = moonContext.createLinearGradient(0, 0, 0, 400);
skyGradient.addColorStop(0, "#000033");
skyGradient.addColorStop(1,"#000099");
moonContext.fillStyle = skyGradient;
moonContext.fillRect(0, 0, 500, 400);
//stars
//fill
moonContext.fillStyle="#ffffff";
//random positions
for(var i=0; i<200; i++){
var xCo = Math.floor(Math.random() * 500);//between 0 and 500
var yCo = Math.floor(Math.random() * 400);//between 0 and 400
moonContext.fillRect(xCo, yCo, 1, 1);
}
//moon
//define gradient
var moonGradient = moonContext.createRadialGradient(370, 80, 10, 350, 100, 50);
moonGradient.addColorStop(0.3, "#ffffff");
moonGradient.addColorStop(0.9, "#FFff66");
//apply fill
moonContext.fillStyle = moonGradient;
moonContext.beginPath();
//define circle
moonContext.arc(350, 100, 50, 0, Math.PI*2);//circle goes from 0 to pi*2
//fill
moonContext.fill();
moonContext.closePath();
</script>
<p>
This canvas demonstrates displaying an external image and drawing a shape on top of it, using stroke styles:
</p>
<canvas id="flowerPic" width="300" height="400">
Whoops! Your browser doesn't support the canvas element...
</canvas>
<!--script could be in head section called on event-->
<script type="text/javascript">
var flowerCanvas = document.getElementById("flowerPic");
flowerContext = flowerCanvas.getContext("2d");
//import image
var flowerImage = new Image();
//define on load function
flowerImage.onload = function(){
//draw the image into the canvas
flowerContext.drawImage(flowerImage, 0, 0);
//draw a circle - define stroke
flowerContext.strokeStyle = "#ffff33";
flowerContext.lineWidth = "2";
//define circle
flowerContext.beginPath();
flowerContext.arc(205, 180, 50, 0, Math.PI*2, true);
//apply stroke
flowerContext.stroke();
flowerContext.closePath();
};
//set the source to begine loading
flowerImage.src = "http://i.imgur.com/cuYld.jpg";
</script>
<p>
This canvas demonstrates a series of basic transformations:
</p>
<canvas id="transPic" width="400" height="300">
Whoops! Your browser doesn't support the canvas element...
</canvas>
<!--script could be in head section called on event-->
<script type="text/javascript">
var transCanvas = document.getElementById("transPic");
var transContext = transCanvas.getContext("2d");
//background gradient
var dayGradient = transContext.createLinearGradient(0, 0, 400, 300);
dayGradient.addColorStop(0, "#0033ff");
dayGradient.addColorStop(1,"#0000cc");
transContext.fillStyle = dayGradient;
transContext.fillRect(0, 0, 400, 300);
//sun
transContext.beginPath();
//define circle
transContext.arc(25, 25, 20, 0, Math.PI*2, true);
//fill
transContext.fillStyle="#ffff00";
transContext.fill();
//stroke
transContext.strokeStyle="#ffffff";
transContext.stroke();
//redraw with translate
for (var j=2;j<17;j++) {
//move across and down
transContext.translate(j*2, j);//translate(x, y)
//define circle arc
transContext.beginPath();
transContext.arc(25, 25, 20, 0, Math.PI*2, true);
//alter alpha with relative value
transContext.globalAlpha=1-((j-1)/15);//alpha value is between 0 and 1
//apply fill
transContext.fill();
//use full alpha for stroke
transContext.globalAlpha=1;
transContext.stroke();
}
</script>
</body>
</html>
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. |