canvas element has extra wide upper border. How can i fix it? : why my page has a lot of empty space between buttons and canvas. when i upload some image

please describe my mistake 
<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-html -->

    <html>
    <input type="file" name="img" id="uploadimage" size="1">
    <a id="downloadLnk" download="img.jpg">download</a>
    </p>
    </td>

    <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.body.appendChild(parkBg);
            parkBg.src = src;
          }
        }

        function download() { //upload
          var dt = canvas.toDataURL('image/jpeg');
          this.href = dt;
        };
        downloadLnk.addEventListener('click', download, false);


        document.getElementById("uploadimage").addEventListener("change", draw, false)
      </script>
    </head>

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

    </html>

<!-- end snippet -->
It looks like your post is mostly code; please add some more details.
It looks like your post is mostly code; please add some more details.
It looks like your post is mostly code; please add some more details.
It looks like your post is mostly code; please add some more details.

