Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<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

Dismiss x
public
Bin info
anonymouspro
0viewers