JSFiddle - React, Tailwind, and code Playground

by abhinav3414

HTML

<button onclick="Take()">to image</button>

        <div id="con">
            <div id="div" style="width: 400px;height: 400px;" >
<div
   id="cat"
   style="position: absolute;top:50px;left:  25px;"
   class="cloudimage-360"
   data-folder="cats/"
   data-filename="{index}.png"
   data-amount="30"
   data-magnifier="2"
 ></div>
    </div>
        <div id="camera" style="position: absolute;top:10px;left:25px">
          hi
        </div>
</div>

        <br><br><br>
<button onclick="Add()" style="margin-top: 40px">+</button>
        <button onclick="Moin()">-</button>
        <br>
                   <button onclick="Up()">Up</button>
<br>
        <button onclick="Right()" >Right</button>
            <button onclick="Left()" > Left </button>
        <br>
            <button onclick="Down()" > Down </button>
        <button onclick="Take()">Take</button>
<canvas id="myCanvas"></canvas>
<script>
function Take() {
console.log('hi')
    html2canvas(document.getElementById("camera"), {
        onrendered: function (canvas) {
            document.body.appendChild(canvas);
        },
        width:320,
        height:220
    });
}
</script>

CSS

#target{
    width:300px;
    height:200px;
    background:blue;
    color:#fff;
    padding:10px;
}

button{
    display:block;
    height:20px;
    margin-top:10px;
    margin-bottom:10px;
}