Problem loading URL

I tried to place an image on canvas and here everything is fine:

 var hats = {
      santa: new Image()
    }

    hats.santa.src = "https://1.bp.blogspot.com/-TLqidoaU-g4/V1UwLG1dWvI/AAAAAAAAC34/4RpuUek_09UwHRsb7HEnaFs8j8OiEhZAwCLcB/s320/pvPMlO2.png";

    if (this.nameSkin.indexOf('pluses') !== -1) {
      mainCtx.save();
      mainCtx.globalAlpha = 1;
      //mainCtx.drawImage(hats.santa, this.x - Math.max(this.size * .19, this._nameSize * .8), this.y - Math.max(this.size * .30, this._nameSize * .8), 0.47 * this.size, 0.47 * this.size);
      mainCtx.drawImage(hats.santa, this.x - this.size, this.y - this.size, 2 * this.size, 2 * this.size);
      drawText(this.x - Math.max(this.size * .0, this._nameSize * .0), this.y - Math.max(this.size * .05), '101', this._nameSize * 0.5, false);
      mainCtx.restore();
    }

Then I tried that the src of the holy image, by a url sent by the user, doing the following:

function recibirUrl() {

var urlcompleta = document.getElementById('url').value;

 var hats = {
      santa: new Image()
    }
hats.santa.src = urlcompleta;



}

IN HTML:

<input type="text" id="url">
<input type="submit" onClick="recibirUrl()">

But before all this, the image does not appear to me, I do not know what the error is, I'm a novice in javascript, thanks!