Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="https://raw.github.com/caleb531/jcanvas/master/jcanvas.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <canvas width="360" height="360" />
  
  <script>
​
    $("canvas")
    // Define properties for all rectangles
    .addLayer({
      name: "redBox",
      type: 'rectangle',
      fillStyle: "red",
      x: 0, y: 0,
      width:180,
      height: $("canvas").height(),
      fromCenter: false,
      group: "boxes",
      mask:true,
      index:0
      }).addLayer({
      name: "yelloBox",
      layer: true,
      type: "rectangle",
       width:200, height:200,
      fillStyle: "green",
      x:0, y: 70,
      fromCenter: false,
      group: "boxes",
      draggable: true,
      index:1,
      mouseover: function(layer) {
        //console.log(layer.index);
      }
      
    }).drawLayers();
    
    
    $("canvas").addLayer({
      name: "yelloBox",
      layer: true,
      type: "rectangle",
      width:200, height:200,
      fillStyle: "blue",
      draggable: true, 
      x:200, y: 70,
      fromCenter: false,
      group: "boxes2",
      index:0,
      mouseover: function(layer) {
        console.log(layer.index);
      }
      
    })
    .drawLayers();
    
    
    
    
​
 
    
  </script>
</body>
</html>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers