How can i capture a frame from HTML Canvas and display it on Bootstrap modal?

Question

I have a page which asks for webcam/camera permission which then moves a webmoji according to the users face position.

At the bottom is a button which will activate (turn blue) if a face is detected. when clicking on this button I want to save the current frame of the WebMoji/ Canvas and display it in a Modal using Bootstrap 4.

Here is my code regarding those elements, along with the JS that I have tried:

<button type="button" class="btn btn-danger btn-lg" data-toggle="modal" data-target="#exampleModal" id="captureFrameBtn" disabled>Face not detected</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true" role="button">&times;</span>
                </button>
            </div>
            <div class="modal-body" id="frameContainer"></div>

            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

<!-- CANVAS WITH THE USER FACE : -->
<canvas class="jeefacetransferCanvas" id="jeefacetransferCanvas"></canvas>
<!-- CANVAS WITH THE WEBOJI : -->
<canvas class="webojiCanvas" id="webojiCanvas" width="600" height="600"></canvas>

<script>
    //Gets the emoji canvas using its ID
    var canvas = document.getElementById("webojiCanvas");
    var img = canvas.toDataURL("image/jpg");
    var captureButton = document.getElementById("captureFrameBtn");
    var frameContainer = document.getElementById("frameContainer");
    captureButton.addEventListener("click", function() {
        frameContainer.innerHTML = "<img src='" + img + "'>";
    });
</script>

Answer 1

Instead of manipulating the contents of frameContainer using it's .innerHTML property I'd recommend creating a new instance of a HTMLImageElement, make it's .src property the result of the .toDataURL() call and append it to the target div using .appendChild() .

Here's an example:

 var canvas = document.getElementById("webojiCanvas"); var ctx = canvas.getContext("2d"); ctx.beginPath(); ctx.arc(100, 75, 50, 0, 2 * Math.PI); ctx.stroke(); var captureButton = document.getElementById("captureFrameBtn"); var frameContainer = document.getElementById("frameContainer"); captureButton.addEventListener("click", function() { var img = new Image(); img.id = "theDuplicate"; img.src = canvas.toDataURL("image/jpg"); if (document.getElementById(img.id)) { document.getElementById(img.id).src = img.src; } else { frameContainer.appendChild(img); } }); 

 <button type="button" class="btn btn-danger btn-lg" data-toggle="modal" data-target="#exampleModal" id="captureFrameBtn"> Face not detected </button> <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel">Modal title</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true" role="button">&times;</span> </button> </div> <div class="modal-body" id="frameContainer"></div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal"> Close </button> </div> </div> </div> </div> <canvas class="webojiCanvas" id="webojiCanvas" width="200" height="200"></canvas>