Horse coat generator

by Gwyn Milcote

HTML

<input onclick="appRandom();" type=button value="Appaloosa">
<input onclick="zebRandom();" type=button value="Zebra">
<input onclick="markingRandom();" type=button value="Marking">
<input onclick="basecoatRandom();" type=button value="Base coat">
<input onclick="basecoatRandom(); markingRandom(); zebRandom(); appRandom();" type=button value="Random all">
<p>
<div class='img-container'>
  <img src="http://orig02.deviantart.net/4878/f/2017/032/8/a/baseblack_by_bronzehalo-daxjx3e.png" name="canvas4" />
  <img src="http://orig10.deviantart.net/8a43/f/2017/032/3/b/splash3_by_bronzehalo-daxjwsw.png" name="canvas3" />
  <img src="http://orig02.deviantart.net/ddf5/f/2017/032/7/3/zebforedark_by_bronzehalo-daxjwmg.png" name="canvas2" />
  <img src="http://orig07.deviantart.net/e6b3/f/2017/032/b/1/app1hinddark_by_bronzehalo-daxjx5y.png" name="canvas1" />
  
</div>
<p><input onclick="merge();" type=button value="Merge"></p>
<canvas id="MERGED" width="400" height="300"></canvas>

CSS

.img-container {
  background-image: url();
  height: 300px;
  position: relative;
  width: 400px;
}

.img-container img {
  left: 0;
  position: absolute;
  top: 0;
}

JavaScript

function appRandom() {
  var appArray = [
    "http://orig12.deviantart.net/5d59/f/2017/032/2/6/app2midwhite_by_bronzehalo-daxjx3u.png", 
    "http://orig04.deviantart.net/892c/f/2017/032/7/9/app2middark_by_bronzehalo-daxjx44.png", 
    "http://orig04.deviantart.net/623a/f/2017/032/d/2/app2hindwhite_by_bronzehalo-daxjx48.png", 
    "http://orig06.deviantart.net/f3b0/f/2017/032/7/5/app2hinddark_by_bronzehalo-daxjx4f.png", 
    "http://orig08.deviantart.net/674a/f/2017/032/1/8/app2forewhite_by_bronzehalo-daxjx4m.png", 
    "http://orig12.deviantart.net/e43a/f/2017/032/e/b/app2foredark_by_bronzehalo-daxjx4r.png", 
    "http://orig10.deviantart.net/0762/f/2017/032/c/f/app1midwhite_by_bronzehalo-daxjx4y.png", 
    "http://orig04.deviantart.net/ff78/f/2017/032/0/4/app1middark_by_bronzehalo-daxjx5a.png", 
    "http://orig14.deviantart.net/c2d2/f/2017/032/7/5/app1foredark_by_bronzehalo-daxjx66.png", 
    "http://orig13.deviantart.net/10bf/f/2017/032/8/8/app1forewhite_by_bronzehalo-daxjx65.png", 
    "http://orig07.deviantart.net/e6b3/f/2017/032/b/1/app1hinddark_by_bronzehalo-daxjx5y.png", 
    "http://orig02.deviantart.net/8e88/f/2017/032/1/c/app1hindwhite_by_bronzehalo-daxjx5r.png", 
  ];
  var num = Math.floor(Math.random() * appArray.length);
  document.canvas1.src = appArray[num];
}

function zebRandom() {
  var zebArray = [
    "http://orig11.deviantart.net/0662/f/2017/032/9/7/zebdotfacedark_by_bronzehalo-daxjwqp.png", 
    "http://orig11.deviantart.net/5232/f/2017/032/9/6/zebdotfacepale_by_bronzehalo-daxjwqi.png", 
    "http://orig14.deviantart.net/c0ad/f/2017/032/1/a/zebdotfacewhite_by_bronzehalo-daxjwqa.png", 
    "http://orig01.deviantart.net/2502/f/2017/032/0/3/zebdotforedark_by_bronzehalo-daxjwq5.png", 
    "http://orig04.deviantart.net/6c06/f/2017/032/9/4/zebdotforepale_by_bronzehalo-daxjwpt.png", 
    "http://orig00.deviantart.net/5762/f/2017/032/6/1/zebdotforewhite_by_bronzehalo-daxjwpj.png", 
   ...