JSFiddle - React, Tailwind, and code Playground

by tahmid

HTML

<h1>Source Canvas</h1>
        <canvas id="source"></canvas>
        <h1>Canvas2</h1>
        <canvas id="dcanvas"></canvas>
<script>
         var sourceImage, ctx, sourceCanvas;
    
            //get the canvases
         sourceCanvas = document.getElementById('source');
         sourceImage = new Image();
        sourceImage.src ='https://dl.dropboxusercontent.com/u/139992952/stackoverflow/BooMu1.png';


         sourceCanvas.width = sourceImage.width;
            sourceCanvas.height = sourceImage.height;
        ctx = sourceCanvas.getContext('2d');
        
       ctx.rotate(25*Math.PI/180);
ctx.fillRect(0,0,400,400);
         ctx.drawImage(sourceImage, 0, 0, sourceImage.width, sourceImage.height);
         
         
         
         
        </script>

 <script>
            
             image = new Image();

            //get the base64 data
            image.src = sourceCanvas.toDataURL('image/png');
            alert(image.src);
            
            var dcanvas = document.getElementById('dcanvas');
            var dctx = dcanvas.getContext('2d');
            
            
            
            
            
        </script>