画像の中央に白い部分を作成する方法残りの部分を透明にする方法

Question

以下の画像のように、中央に白い部分を作成しようとしています。
私はオーバーレイ技術を使用しましたが、これは失敗します。
私もclip-pathを使ってみました。

この例はshutterstockにあります。
私は実際にその部分を作り直そうとしています。

($)(function() { 
 

 
    var canvas = new fabric.Canvas('editor-canvas'); 
 
    $(window).resize(function() { 
 
    canvas.setHeight(window.innerHeight); 
 
    canvas.setWidth(window.innerWidth); 
 
    }); 
 
    var rect = new fabric.Rect({ 
 
    left: 100, 
 
    top: 100, 
 
    fill: 'red', 
 
    width: 470, 
 
    height: 120 
 
    }); 
 
    canvas.calcOffset(); 
 
    canvas.setHeight(window.innerHeight); 
 
    canvas.setWidth(window.innerWidth); 
 
    canvas.renderAll(); 
 
    canvas.globalAlpha = 0.5; 
 
    canvas.add(rect); 
 
});

.editor-canvas-container { 
 
    width: 100%; 
 
    height: 100%; 
 
    position: relative; 
 
    left: 55px; 
 
} 
 

 
.editor-canvas-container .editor-canvas-wrapper { 
 
    width: 100%; 
 
    height: 100%; 
 
    z-index: -2; 
 
    background: #1e1e1f; 
 
} 
 

 
.editor-canvas-container .editor-canvas-wrapper .canvas-container { 
 
    margin: 0 auto; 
 
} 
 

 
.editor-canvas-container .editor-canvas-wrapper #editor-canvas { 
 
    width: 500px; 
 
    height: 300px; 
 
    background: white; 
 
} 
 

 
.editor-footer>div { 
 
    display: flex; 
 
    align-items: center; 
 
    border: 1px #ddd; 
 
    flex: 1; 
 
} 
 

 
.editor-footer .editor-footer-left-wraper { 
 
    flex: 1; 
 
    display: -webkit-box; 
 
    padding: 0px 15px; 
 
} 
 

 
.editor-footer .editor-footer-left-wraper>div { 
 
    color: white; 
 
    display: -webkit-box; 
 
    padding: 0px 10px; 
 
} 
 

 
.editor-body-container { 
 
    overflow: hidden; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.19/fabric.min.js"></script> 
 

 
<section class="editor-canvas-container"> 
 
    <div class="editor-canvas-wrapper"> 
 
    <canvas id="editor-canvas" class="inset"></canvas> 
 
    </div> 
 
</section>

Answer 1

var canvas = new fabric.Canvas('c'); 
 
canvas.backgroundColor = 'black'; 
 
canvas.setBackgroundImage(new fabric.Rect({ 
 
left: canvas.width/2, 
 
top: canvas.height/2, 
 
fill: 'white', 
 
width: canvas.width*2/3, 
 
height: canvas.height*2/3, 
 
originX:'center', 
 
originY:'center', 
 
})) 
 
canvas.renderAll();

canvas { 
 
border: blue dotted 2px; 
 
}

<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.min.js"></script> 
 
<canvas id="c" width="400" height="400"></canvas>

あなたはsetBackgroundImageを使用してバックグラウンドとしてRectオブジェクトを設定することができます。