JavaScript full screen overlay using a canvas element

<html>

<head>

   <script>
      function showCanvas(text, image) {

         var canvas = document.createElement('canvas');

         canvas.addEventListener('click', function(event) {
            canvas.style.visibility = "hidden";
         }, false);

         window.addEventListener('resize', function(event) {
            if (canvas.style.visibility == "visible") {
               drawCanvas(canvas, text, image);
            }
         }, false);

         drawCanvas(canvas, text, image);

         document.body.appendChild(canvas);

      }

      function drawCanvas(canvas, text, image) {

         var context = canvas.getContext('2d');

         canvas.style.left = "0";
         canvas.style.top = "0";
         canvas.width = "100%";
         canvas.height = "100%";
         canvas.style.position = "fixed";
         canvas.style.visibility = "visible";
         canvas.style.background = "black";
         canvas.style.opacity = "0.85";

         var img = new Image();
         img.src = "https://somedomain/somepath/" + image + ".jpg";
         img.onload = function() {
            context.drawImage(img, (canvas.width - img.width) / 2, (canvas.height - img.height) / 8, img.width, img.height);

            context.font = "30px Arial";
            context.fillStyle = "white";
            context.textAlign = "center";
            context.fillText(text, canvas.width/2, (canvas.height - img.height) / 4 + img.height);
         }

      }
   </script>

</head>

<body>

   <a href="" onClick="showCanvas('Some text.', 'imagename'); return false;">Click here</a>

</body>

</html>