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>
  <meta charset="utf-8">
  <title>Trying Fabric</title>
  <style type="text/css">
    body {
      background-color: white;
    }
  </style>
</head>
<body>
  <h1>try moving doge</h1>
  <canvas id="c"></canvas>
​
  <script src="//cdnjs.cloudflare.com/ajax/libs/fabric.js/1.4.0/fabric.min.js"></script>
  <script>
    var canvas = new fabric.Canvas('c');
    canvas.setWidth(500);
    canvas.setHeight(300);
    
    var rect = new fabric.Rect({
      top: 50,
      left: 400,
      width: 100,
      height: 100,
      fill: 'green'
    })
    
    canvas.add(rect);
    
    var circle = new fabric.Circle({
      top: 50,
      left: 400,
      radius: 50,
      fill: 'yellow'
    })
    
    canvas.add(circle);
    
    fabric.Image.fromURL('https://pbs.twimg.com/profile_images/378800000716229938/73161235e8977a68dbeeaabc5ca303b4.jpeg', function(oImg) {
      // scale image down, and flip it, before adding it onto canvas
      oImg.scale(0.7).setFlipX(true);
      oImg.setTop(50)
      oImg.setLeft(100)
      canvas.add(oImg);
    });
  </script>
</body>
</html>
 
​
Output

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

Dismiss x
public
Bin info
benatkinpro
0viewers