JSFiddle - React, Tailwind, and code Playground

by abhinav3414

HTML

<!DOCTYPE>
<html>
<head>
    
    
 </head>   
      <script src="html2canvas.js"></script>
   <script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>

    <body>
        
        <div id="con">
            <div id="div" style="width: 400px;height: 400px;" >
<div
     id="cat"
     style="position: absolute;top:80px;left:  25px;"
   class="cloudimage-360"
data-folder="https://scaleflex.airstore.io/demo/indoor/"
	data-filename="{index}.jpeg"
   data-amount="100"
></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>
<div id="addCanvasInside" style="border: 2px solid"></div>  
    </body>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/webcamjs/1.0.26/webcam.min.js"></script>
<script src="https://cdn.scaleflex.it/filerobot/js-cloudimage-360-view/v2.0.0.lozad.min.js"></script>


</html>

CSS

#con {
  display:flex; flex-direction: column; text-align:center;
	margin: 0px auto;

}
              #cat{
padding: inherit;
        align-content: center;
        z-index: 99 !important;
        order: 1;
    }
        #camera{
            
            order:2;
        }

JavaScript

function Take() {
   html2canvas(document.body).then(canvas => {
            document.querySelector("#addCanvasInside").appendChild(canvas);
});
}
function Add(){
        var width = document.getElementById('div').offsetWidth;

        var height = document.getElementById('div').offsetHeight;
        if(width<620){
        height+=20;
        width+=20;
        for(var i=0;i<5;i++)
            Left();
            Up();
        document.getElementById('div').setAttribute("style","width:"+width+"px");
        }
    }
    function Moin(){
        var width = document.getElementById('div').offsetWidth;
        var height = document.getElementById('div').offsetHeight;
        height-=20;
        width-=20;
            Right();
        if(width<300){
            for(var i=0;i<5;i++)
                Down();
        }
        document.getElementById('div').setAttribute("style","width:"+width+"px");

    }
      function Up(){
          
        var div = document.getElementById('cat');//;.offsetTop;*
        var up = document.getElementById('cat').offsetTop;
          console.log(up);
        up-=10;
        console.log(up);
        div.style.top=up+"px";
      
      }
     function Down(){
        var div = document.getElementById('cat');//;.offsetTop;*
        var up = document.getElementById('cat').offsetTop;
        up+=1;
        div.style.top=up+"px";
      
      }
     function Right(){
        var div = document.getElementById('cat');//;.offsetTop;*
        var up = document.getElementById('cat').offsetLeft;
        up+=1;
        div.style.left=up+"px";
      
      }
     function Left(){
        var div = document.getElementById('cat');//;.offsetTop;*
        var up = document.getElementById('cat').offsetLeft;
        up-=10;
        div.style.left=up+"px";
      
      }
    
    
  
    function Save1(){
        
        html2canvas(document.getElementById("demo")).then(function(canvas) {
             document.body.appendChild(canvas);
            ...