JSFiddle - React, Tailwind, and code Playground

by iLight

HTML

<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<img src="http://www.dev.gophotoweb.ru/img/promo/bg.jpg" alt="">
<br>
<canvas id="fog-canvas" width="600" height="140"></canvas>

CSS

img{
  width: 300px;
}
#fog-canvas{
  width: 300px;
}

JavaScript

$(document).ready(function() {
  	var fog_canvas = document.getElementById('fog-canvas');
		var fog_context = fog_canvas.getContext('2d');
    
  var bg = new Image();

		bg.src = 'http://www.dev.gophotoweb.ru/img/promo/bg.jpg';

		bg.onload = function() {
			fog_context.drawImage(bg, 0, 0, 600, 140);
		}

});