JSFiddle - React, Tailwind, and code Playground

by darcyclarke

HTML

<div class="container"></div>

CSS

.container img {
 width: 300px;
  height: auto;  
}

JavaScript

// Setup
var container = document.getElementsByClassName('container')[0],
    img = document.createElement('img'),
    canvas = document.createElement('canvas'),
    ctx = canvas.getContext('2d'),
    height = 0,
    width = 0;

// Create & Insert
img.src = 'http://www.pluspets.net/wp-content/uploads/2010/07/Cutest-Puppies7.jpg';
img.onload = function(){ 
    
    // Store Vales & Draw to Canvas
    width = img.clientWidth;
    height = img.clientHeight;
    
    // Set Canvas Dimension
    canvas.height = height;
    canvas.width = width;
    
    // Draw Image
    ctx.drawImage(img,0,0,width,height);
    
    // Remove Image
    container.removeChild(img);
 
    // Append Canvas
    container.appendChild(canvas); 
};
container.appendChild(img);