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">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <canvas id="canvas"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/521/fabric.min.js" integrity="sha512-nPzvcIhv7AtvjpNcnbr86eT6zGtiudLiLyVssCWLmvQHgR95VvkLX8mMpqNKWs1TG3Hnf+tvHpnGmpPS3yJIgw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/4.0.0-beta.6/fabric.min.js" integrity="sha512-rKF82ziMDgkkUwTBlsQhy6Dzdyydg5ikvL1zueWJ6SQxzXaqPY85rEiRvJymMI5YiQqyvm0+mlVYb5tLjmslQA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> -->
</body>
</html>
 
body, html {
  width: 100%;
  height: 100%;
}
 
const canvas = new fabric.Canvas('canvas');
canvas.setWidth(document.body.clientWidth);
canvas.setHeight(document.body.clientHeight);
​
const angle = 100;
const radius = 100;
​
const arc = new fabric.Circle({
  originX: 'center',
  originY: 'center',
  radius: radius,
  fill: 'rgba(0,0,0,0.8)',
  left: 100,
  top: 100,
  clipTo: (ctx) => {
    ctx.moveTo(0, 0);
    ctx.arc(
      0,
      0,
      radius,
      (360 - angle) * (Math.PI / 180) - Math.PI / 2, 
      360 * (Math.PI / 180) - Math.PI / 2,
      false
    );
    },
});
​
canvas.add(arc);
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers