Comment créer une zone blanche au centre du recadrage d'image avec le reste de la protion comme transparent

Question

J'essaie de créer la zone blanche au centre, comme l'image ci-dessous.
J'ai utilisé la technique de superposition, mais cela échoue.
J'ai également essayé d'utiliser clip-path.

Cet exemple peut être trouvé à shutterstock.
Je suis en train d'essayer de recréer cette partie.

($)(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>

Vous pouvez définir un objet Rect en arrière-plan en utilisant setBackgroundImage.