JSFiddle - React, Tailwind, and code Playground

by clayrabbit

HTML

<div style="width: 600px; margin: auto; text-align: center; font-family: arial">
  <p>And so, the unwritten law of the internet, that any experiment involving video/images must involve cats in one way or another, reared its head again. When would the internet's fascination with cats come to an end? Never. The answer is "Never".</p> 
<div class="mydiv">
<canvas class="mycanvas" width=320 height=240></canvas>
<img class="myimg" data-src="https://i.giphy.com/media/Byana3FscAMGQ/giphy.webp">
</div>

</div>

CSS

.mydiv{
  width: 320px;
  height: 240px;
  position: relative;
}
.mycanvas, .myimg {
  width: 100%;
  height: 100%;
  position: absolute;
}

JavaScript

[].forEach.call(document.querySelectorAll('.myimg'), function(elem) {
	var img = new Image();
	img.onload = function(event) {
  	elem.previousElementSibling.getContext('2d').drawImage(img, 0, 0);
	};
  img.src = elem.getAttribute('data-src');
  
	elem.onmouseover = function(event) {
		event.target.src = event.target.getAttribute('data-src');
	};
	elem.onmouseout = function(event) {
		event.target.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=";
	};
});