JSFiddle - React, Tailwind, and code Playground

by BurpmanJunior

HTML

<figure class="mockup-gen" id="mugen1" data-mugen-colour="#a8837e" data-mugen-buffer="25px">
  <span></span>
  <img src="https://images.unsplash.com/photo-1469692422776-14abcfa4b525?dpr=1&auto=compress,format&fit=crop&w=1199&h=799&q=80&cs=tinysrgb&crop=" />
  <!-- <img src="https://images.unsplash.com/photo-1418985991508-e47386d96a71?dpr=1&auto=compress,format&fit=crop&w=1199&h=799&q=80&cs=tinysrgb&crop=" /> -->
</figure>

<figure class="mockup-gen" id="mugen2" data-mugen-colour="#a8837e" data-mugen-buffer="25px">
  <span></span>
  <!-- <img src="https://images.unsplash.com/photo-1469692422776-14abcfa4b525?dpr=1&auto=compress,format&fit=crop&w=1199&h=799&q=80&cs=tinysrgb&crop=" /> -->
  <img src="https://images.unsplash.com/photo-1418985991508-e47386d96a71?dpr=1&auto=compress,format&fit=crop&w=1199&h=799&q=80&cs=tinysrgb&crop=" />
</figure>

SCSS

figure{
  margin: 0;  
}

img{
  max-width: 100%;
}

.mockup-gen{
  max-width: 70%;
  margin: 3em auto;
  position: relative;
  padding: 25px;
  
  *{
    transform-origin: center center;
  }
  
  img{
    //opacity: 0;
  }
  
  canvas{
    position: absolute;
    top: 25px;
    left: 25px;
    z-index: -1;
    transform: scale(1.01);
  }
  
}

Babel + JSX

let mugen = function(el){
  this.elem = el;
  this.img = el.querySelector(`img`);
	if(!this.elem || !this.img){ return false; }
  
  this.colour = this.elem.getAttribute(`data-mugen-colour`) ? this.elem.getAttribute(`data-mugen-colour`) : `#999`;
  
  this.texture = new Image();
  this.texture.onload = () => { this.initStage(); }
  this.texture.src = `https://i.imgur.com/M5Xgbuk.jpg`;
}

mugen.prototype.initStage = function(){
  this.stage = document.createElement(`canvas`);
  this.ctx = this.stage.getContext(`2d`);
  this.appendStage();
  this.stage_transform_str = this.getExtistingStageTransform();
  this.updateStageSize();
  
  /*
  this.texture_scale = 0.5;
  this.texture_spawn_x = this.stage.width / (Math.random() * ((this.texture.width * this.texture_scale) - this.stage.width));
  this.texture_spawn_y = this.stage.height / (Math.random() * ((this.texture.height * this.texture_scale) - this.stage.height));
  console.log(this.texture_spawn_x, this.texture_spawn_y);
  */
  
  this.draw();
}

mugen.prototype.updateStageSize = function(){
  this.stage.width = this.img.offsetWidth;
  this.stage.height = this.img.offsetHeight;
}

mugen.prototype.getExtistingStageTransform = function(){
	let styles = window.getComputedStyle(this.stage);
  return styles.hasOwnProperty(`transform`) ? styles.transform : ``;
}

mugen.prototype.draw = function(){  
	this.ctx.fillStyle = this.colour;
  this.ctx.fillRect(0, 0, this.stage.width, this.stage.height);
  
  this.ctx.globalCompositeOperation = `multiply`;
  this.ctx.drawImage(this.texture, 0 - (this.stage.width / 2), 0 - (this.stage.height / 2), this.stage.width * 2, this.stage.height * 2);
  this.ctx.globalCompositeOperation = `destination-in`;
}

mugen.prototype.appendStage = function(){
	this.stage = this.elem.appendChild(this.stage);
  this.ctx = this.stage.getContext(`2d`);
}


// DEMO
window.addEventListener(`load`, () => {
	new mugen(document.querySelector(`#mugen1`));
	new mugen(document.querySelector(`#mugen2`));
});