title: Hide / show images inside canvas
body: <p>I'm making a page where I want people to be able to overlapp images and then upload them to my server. </p>
  
  <p>I've built the uploading page and I've put two test images in a canvas. The only issue noe is to be able to hide / show these two images through a button or checkbox. </p>
  
  <p>I've uploaded a test page here: <a href="http://kaosmos.no/bokbodentest2/upload.html" rel="nofollow noreferrer">http://kaosmos.no/bokbodentest2/upload.html</a></p>
  
  <p>This is my code for the canvas: </p>
  
  <pre><code>&lt;input type="checkbox"/&gt;Check to hide img1
  &lt;input type="checkbox"/&gt;Check to hide img2
  
  
  &lt;img class="bilder" id="img1" src="test1.png"&gt;
  &lt;img class="bilder" id="img2" src="test2.png"&gt;
  &lt;canvas id="canvas"&gt;&lt;/canvas&gt;
  
  &lt;script type="text/javascript"&gt;
  var img1 = document.getElementById('img1');
  var img2 = document.getElementById('img2');
  var canvas = document.getElementById('canvas');
  var context = canvas.getContext('2d');
  
  canvas.width = img1.width;
  canvas.height = img1.height;
  
  context.globalAlpha = 1.0;
  context.drawImage(img1, 0, 0);
  context.globalAlpha = 0.5; //Remove if pngs have alpha
  context.drawImage(img2, 0, 0);
  
  
  &lt;/script&gt;
  </code></pre>
  
  <p>And CSS: </p>
  
  <pre><code>canvas {
  border: solid;
  overflow: hidden;
  }
  
  canvas img {
  width: 600px;
  position: absolute;
  mix-blend-mode: multiply;
  }
  
  .bilder {
  display: none;
  }
  </code></pre>
  
  <p>The display: none; in the "bilder" class is so that the images won't be visable outside the canvas. How do I make a function to hide / show these images? </p>
  
  <p>Any help is much appreciated! </p>