JSFiddle - React, Tailwind, and code Playground

by Gwyn Milcote

HTML

canvas coat gen.
<br><br>
<div id='coat_holder'>
    <img name='basecoat_img' src=''>
    <img name='white_img' src=''>
    
</div>
<br><button onclick="generate();">Generate</button> <button onclick="merge();">Merge</button>
<br><canvas id='coat_canvas'></canvas>

CSS

img, div {box-sizing: border-box;}
#coat_holder {
    border: 0px solid black;
    padding: 0px;
    width: 400px;
    height: 300px;
    display: block;
    position: relative;
}

#coat_holder img {
    position: absolute;
    top: 0;
    left: 0;
    width: 400px;
    height: 300px;
}

#coat_canvas {
    width: 400px;
    height: 300px;
}

JavaScript

/*
var canvas = document.getElementById('coat_canvas'),
context = canvas.getContext('2d');

make_base();

// reminder:
//context.drawImage(image, left, top);
//context.drawImage(image, left, top, width, height);

function make_base(){
    base_image = new Image();
    base_image.src = 'https://ichef.bbci.co.uk/news/270/cpsprodpb/18069/production/_111490489_mediaitem111490061.jpg';
    base_image.onload = function(){
        context.drawImage(base_image, 0, 0, 100, 100);
    }
}
*/

// Generate random number between 2 numbers.
function randomNumber(min, max){
  return Math.floor(Math.random() * (max - min + 1) + min);
}

// Get a random thing from an array.
function randomArray(array){
    return array[Math.floor(Math.random()*array.length)];
}

var basecoat_array = [
    "http://orig09.deviantart.net/ef94/f/2017/032/7/1/basebay_by_bronzehalo-daxjx3k.png",
    "http://orig02.deviantart.net/4878/f/2017/032/8/a/baseblack_by_bronzehalo-daxjx3e.png",
    "http://orig02.deviantart.net/58a6/f/2017/032/6/e/basechestnut_by_bronzehalo-daxjx2w.png",
    "http://orig11.deviantart.net/14e8/f/2017/032/8/3/basecrem_by_bronzehalo-daxjx2q.png",
    "http://orig07.deviantart.net/79b3/f/2017/032/0/5/basedarkpalo_by_bronzehalo-daxjx22.png",
    "http://orig08.deviantart.net/1899/f/2017/032/b/9/basedarkgrey_by_bronzehalo-daxjx24.png",
    "http://orig13.deviantart.net/fc2a/f/2017/032/1/1/basedarkblue_by_bronzehalo-daxjx2c.png",
    "http://orig06.deviantart.net/fb64/f/2017/032/3/8/basedarkbay_by_bronzehalo-daxjx2i.png",
    "http://orig10.deviantart.net/f5ce/f/2017/032/0/d/baseflaxch_by_bronzehalo-daxjx1t.png",
    "http://orig10.deviantart.net/e273/f/2017/032/8/f/baseflaxlivch_by_bronzehalo-daxjx1l.png",
    "http://orig15.deviantart.net/716b/f/2017/032/5/4/baselightblue_by_bronzehalo-daxjx1f.png",
    "http://orig14.deviantart.net/50ce/f/2017/032/c/b/baselightgrey_by_bronzehalo-daxjx14.png",
   ...