JSFiddle - React, Tailwind, and code Playground

by confile

HTML

Image 2 <br>
<div id="mydiv" ></div>

   
<br><br>   
<img id="image2">

CSS

img {
/* image-rendering: optimizeQuality; */

}

#image2 {
    border: 1px solid red;
    
}

#mydiv {
    border: 2px solid blue;
}

#image2 {
    border: 3px solid green;
}

JavaScript

var mydiv = document.getElementById('mydiv'),
    image2 = document.getElementById('image2');

image2.crossOrigin="anonymous";

var image3 = new Image();
mydiv.appendChild(image3);
image3.onload = function() {
    
    var canvas = document.createElement('canvas'),
    ctx = canvas.getContext('2d');

    canvas.width = image3.width;
    canvas.height = image3.height;
    
    ctx.drawImage(image3,0,0, canvas.width, canvas.height);
    
    var data1 = canvas.toDataURL('image/png');
    image2.src= data1;
    

}
image3.crossOrigin="anonymous";
image3.src = "https://dl.dropboxusercontent.com/u/47067729/sticker4.svg";