JSFiddle - React, Tailwind, and code Playground

HTML

looping stops ay 10 seconds
<div class="stoppable">
    <canvas style="display: none" width="100" height="100"></canvas>
    <img style="display: block" src="https://i.chzbgr.com/maxW500/7833327104/hB754A735/"/>
</div>
loop indefinitely:
<img style="display: block" src="https://i.chzbgr.com/maxW500/7833327104/hB754A735/"/>

CSS

.stoppable {
    width: 100px;
    height: 100px;
}
.stoppable canvas, .stoppable img {
    width: 100%;
    height: 100%;
}
img {
    width: 100px;
    height: 100px;
}

JavaScript

var c = $(".stoppable canvas")[0];
var w = c.width;
var h = c.height;
var img = $(".stoppable img")[0];
setTimeout(function () {
    c.getContext('2d').drawImage(img, 0, 0, w, h);
    $(img).hide();
    $(c).show();
},10000);