JSFiddle - React, Tailwind, and code Playground

by yairamon

HTML

<script src="https://www.marvinj.org/releases/marvinj-0.8.js"></script>

xxx
<div style="width:400px; height:352px;  background-color: green;">
  
  <img id=foo height=200 width=200 
           background-color = red
         >
</div>

yyy

<div style="width:400px; height:352px;  background-image: linear-gradient(45deg, #808080 25%, transparent 25%),
	linear-gradient(-45deg, #808080 25%, transparent 25%),
	linear-gradient(45deg, transparent 75%, #808080 75%), 
	linear-gradient(-45deg, transparent 75%, #808080 75%);
	background-size: 20px 20px;
	background-position: 0 0, 0 10px, 10px -10px, -10px 0px;">
<canvas id="canvas" width="400" height="352"></canvas>
</div>

JavaScript

var canvas = document.getElementById("canvas");
image = new MarvinImage();
image.load("https://pogo.host/A/sync/Assets/pokemon_icon_004_00.png", imageLoaded);

function imageLoaded(){
	image.setColorToAlpha(0, 0);	
	image.draw(canvas);
  
  
   document.getElementById("foo").src = window.URL.createObjectURL(image.toBlob())
}