JSFiddle - React, Tailwind, and code Playground

by Takayuki Shimada

HTML

<div id="test1">img</div>
<div id="test2">canvas (1x)</div>
<div id="test3">canvas (3x)</div>

CSS

img,canvas{display:block}

JavaScript

!function() {
    
    var test1 = document.getElementById('test1');
    var test2 = document.getElementById('test2');
    var test3 = document.getElementById('test3');

	var svg = 'data:image/svg+xml,' + encodeURIComponent('<?xml version="1.0" encoding="utf-8"?><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100"><rect fill="#000" x="10" y="10" width="80" height="80" transform="rotate(0.5)"/></svg>');
    
    var image = new Image();
    
    image.onload = function() {
        test1.appendChild(image);

        var canvas1 = document.createElement('canvas');
        var context1 = canvas1.getContext('2d');
        canvas1.width = 100;
        canvas1.height = 100;
        context1.drawImage(image, 0, 0);
        test2.appendChild(canvas1);

        var canvas2 = document.createElement('canvas');
        var context2 = canvas2.getContext('2d');
        canvas2.width = 300;
        canvas2.height = 300;
        canvas2.style.width = '100px';
        canvas2.style.height = '100px';
        context2.drawImage(image, 0, 0, 300, 300);
        test3.appendChild(canvas2);
    };
    
    image.src = svg;

}();