Как сделать в Fabric js скрывание объектов по маске?
Должно получиться, как на 2-ом скрине. Т.е. вывести background на передний фон, но чтоб картинку, в белом круге (transparent), можно было таскать и она скрывалась, где заканчивается граница круга
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<link rel="stylesheet" type="text/css" href="css/css.css">
<script type="text/javascript" src="js/Jquery.js"></script>
<script type="text/javascript" src="js/fabric.min.js"></script>
<script type="text/javascript" src="js/js.js"></script>
<body onLoad="c()">
<div class='bg'></div>
<canvas id="c" height='600' width='800'>
<img src="img/my_image.png" id="my-img">
</canvas>
</body>
</html>
function c()
{
var canvas = new fabric.Canvas('c');
var imgElement = document.getElementById('my-img');
var imgInstance = new fabric.Image(imgElement, {
left: 100,
top: 50,
width: 300,
height: 200,
angle: 0,
opacity: 1
});
canvas.add(imgInstance);
}
Ссылка на fabricJS
https://github.com/kangax/fabric.js/tags