title: Setting image size percentage in canvas and jquery
body: <p>I'm trying to create a one-pager at the moment with a canvas where you can click to add/place images at random. I've gotten most of what I want to work, but being extremely new to jquery and canvas, I still can't figure out how to set a max-size for my images. As far as I've understood, it can be quite hard to make images on a canvas work perfectly when you haven't set the canvas size manually in css, but I have a resizing canvas, so I'm not really sure how I get around that.</p>
  
  <p>I want the images that I place to have a max-height/max-width of 80% of the viewport. I tried setting a max size in css, but it didn't do anything. </p>
  
  <p>Here's a <a href="https://jsfiddle.net/L5cL6ant/20/" rel="nofollow noreferrer">jsfiddle</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>  $(document).ready(function () {
     var images = [];
      $("#siteload").fadeIn(1500);
     $('.put').each(function() {
       images.push($(this).attr('src'));
      });
      (function() {
      var
          htmlCanvas = document.getElementById('c'),
          context = htmlCanvas.getContext('2d');
          initialize();
          img = new Image();
          count = 0;
          htmlCanvas.onclick= function(evt) {
          img.src = images[count];
            var x = evt.offsetX - img.width/2,
                y = evt.offsetY - img.height/2;
            context.drawImage(img, x, y);
            count++;
            if (count == images.length) {
            count = 0;
            }
          }
        function initialize() {
          window.addEventListener('resize', resizeCanvas, false);
          resizeCanvas();
        }
        function resizeCanvas() {
          htmlCanvas.width = window.innerWidth;
          htmlCanvas.height = window.innerHeight;
        }
      })();
    });
    $(".hvr_cnt").mouseenter(function () {
        title = $("&lt;div class='hvr_ttl'&gt;" + $(this).children()[0].title + "&lt;/div&gt;");
        $(this).children()[0].title = "";
        $(this).append(title);
    });
    $(document).mousemove(function(e){
       $('.hvr_ttl').css({
         top: e.pageY - $(".hvr_ttl").height()/2,
         left:  e.pageX - $(".hvr_ttl").width()/2
       });
     });
    $(".hvr_cnt").mouseleave(function (e) {
       $(this).children()[0].title = $($(this).children()[1]).html();
       $(this).children()[1].remove();
    });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    margin: 0;
    padding: 0;
    background: rgb(240, 240, 240);
    width: 100%;
    height: 100%;
    border: 0;
    color: rgb(40, 40, 40);
    overflow: hidden;
    display: block;
  }
  
  .slides {
    display: none
  }
  
  #c {
    display: block;
    position: absolute;
    left: 0px;
    top: 0px;
  }
  
  .hvr_ttl {
    display: block;
    position: absolute;
    pointer-events: none;
    cursor: none;
  }
  
  .hvr_cnt {
    cursor: none;
    padding: none;
    margin: none;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;body ontouchstart=""&gt;
    &lt;div class="hvr_cnt"&gt;
      &lt;canvas id="c" title="click"&gt;&lt;/canvas&gt;
    &lt;/div&gt;
    &lt;ul class="slides"&gt;
      &lt;li&gt;&lt;img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/85/Smiley.svg/2000px-Smiley.svg.png" class="put" /&gt;&lt;/li&gt;
      &lt;li&gt;&lt;img src="https://emojipedia-us.s3.amazonaws.com/thumbs/160/google/56/thumbs-up-sign_1f44d.png" class="put" /&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Any help would be appreciated :)</p>