JSFiddle - React, Tailwind, and code Playground

by Sedbol

HTML

<div class="app">
<div class="one" style="width: 100px;height: 100px;background: yellow"><canvas id="myCanvas" width="100" height="100" style="border:1px solid #d3d3d3;"></div>
<div class="tu" style="width: 100px;height: 100px;background: green;margin-top: 200px">Click</div>
</div>

CSS

.wek{
            width: 40px;
            height: 40px;

            position: absolute;
            transition: 2.5s;
        }

JavaScript

document.getElementsByClassName('tu')[0].addEventListener('click',e=>{
        let canvas = document.getElementById("myCanvas");
        let context = canvas.getContext("2d");
        context.clearRect(0, 0, canvas.width, canvas.height);
        const m=document.getElementsByClassName('app')[0];
        const n=document.createElement('img');
        const getS=document.querySelector('.tu').getBoundingClientRect();
        n.className="wek";
        n.src="https://sapps-static.ru/gifts/1.4KUc7D.png";
        n.style.top=(getS.top+30)+'px';
        n.style.left=(getS.left+30)+'px';
        m.appendChild(n);
        const s=document.querySelectorAll('.wek');
        const setS=document.querySelector('.one').getBoundingClientRect();
        const set=s[s.length-1];
        set.style.top=(setS.top+70)+'px';
        set.style.left=(setS.left+65)+'px';
        setTimeout(function () {

            var img = new Image();
            img.onload = function() {
                context.drawImage(img, 65, 65,40,40);
            };
            img.src = "https://sapps-static.ru/gifts/1.4KUc7D.png";
            n.remove();
        },2600)
    })