JSFiddle - React, Tailwind, and code Playground

by Marion Hurteau

HTML

<canvas width=100 height=100></canvas>

JavaScript

// function checkload(event) {

// }

var image1 = new Image;
image1.src = 'data:image/gif;base64,R0lGODdhAgACALMAAAAAAP///wAAAAAAAP8AAAAAAAAAAAAAAAAA/wAAAAAAAAAAAAAAAAAAAAAAAAAAACwAAAAAAgACAAAEAxBJFAA7';


var image2 = new Image;
image2.src = 'data:image/gif;base64,R0lGODdhAgACALMAAAAAAP///wAAAAAAAP8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACwAAAAAAgACAAAEA5BIEgA7';
image2.onload = function(event) {
  
  var canvas = document.querySelector('canvas');
  var context = canvas.getContext('2d');
  context.drawImage(image1, 0, 0, 50, 50);
  context.drawImage(image2, 50, 50, 100, 100);

  var combined = new Image;
  combined.src = canvas.toDataURL('data/gif');
  
  document.body.appendChild(combined);
}