Untitled

<head>

  <script>
    function draw() { //upload
      var ctx = document.getElementById('canvas').getContext('2d'),
        img = new Image(),
        f = document.getElementById("uploadimage").files[0],
        url = window.zURL || window.URL,
        src = url.createObjectURL(f);
        img.src = src;

      img.onload = function() {
        var parkBg = new Image(600, 500);
        document.getElementById("canvas").appendChild(parkBg);
        parkBg.src = src;
        ctx.drawImage(img, 10, 10);
      }
    }
    document.getElementById("uploadimage").addEventListener("change", draw, false)
  </script>

  <style>

input[type="file"]{
    display: block;
   }
#canvas{
    width: 600px;
    height: 500px;
}

  </style>
</head>

<body>
   <canvas id="canvas" ></canvas>
</body>

</html>

// Remove default margins, fix height
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}