JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="below" width="100" height="100"></canvas>
<canvas id="texture" width="100" height="100"></canvas> 
<canvas id="composite" width="100" height="100" style="z-index:1x solid green;"></canvas>

JavaScript

var can = document.getElementById('below');
var below = can.getContext('2d');
below.fillStyle = "#FF0000";
below.fillRect(0,0,512,512);
var can2 = document.getElementById('texture');
var texture = can2.getContext('2d');

var img = new Image;
img.onload = function(){
    texture.drawImage(img,0,0);
    var can3 = document.getElementById('composite');
    var composite = can3.getContext('2d');
    composite.globalCompositeOperation = "multiply";
    composite.drawImage(can, 0, 0);
    composite.drawImage(can2, 0, 0);
};
img.src = "http://i.imgur.com/DGuWpEg.png";