daily pastebin goal
55%
SHARE
TWEET

JavaScript full screen overlay using a canvas element

dkalemis Feb 12th, 2018 63 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <html>
  2.  
  3. <head>
  4.  
  5.    <script>
  6.       function showCanvas(text, image) {
  7.  
  8.          var canvas = document.createElement('canvas');
  9.  
  10.          canvas.addEventListener('click', function(event) {
  11.             canvas.style.visibility = "hidden";
  12.          }, false);
  13.  
  14.          window.addEventListener('resize', function(event) {
  15.             if (canvas.style.visibility == "visible") {
  16.                drawCanvas(canvas, text, image);
  17.             }
  18.          }, false);
  19.  
  20.          drawCanvas(canvas, text, image);
  21.  
  22.          document.body.appendChild(canvas);
  23.  
  24.       }
  25.  
  26.       function drawCanvas(canvas, text, image) {
  27.  
  28.          var context = canvas.getContext('2d');
  29.  
  30.          canvas.style.left = "0";
  31.          canvas.style.top = "0";
  32.          canvas.width = window.innerWidth;
  33.          canvas.height = window.innerHeight;
  34.          canvas.style.position = "absolute";
  35.          canvas.style.visibility = "visible";
  36.          canvas.style.background = "black";
  37.          canvas.style.opacity = "0.85";
  38.  
  39.          var img = new Image();
  40.          img.src = "https://somedomain/somepath/" + image + ".jpg";
  41.          img.onload = function() {
  42.             context.drawImage(img, (canvas.width - img.width) / 2, (canvas.height - img.height) / 8, img.width, img.height);
  43.  
  44.             context.font = "30px Arial";
  45.             context.fillStyle = "white";
  46.             context.textAlign = "center";
  47.             context.fillText(text, canvas.width/2, (canvas.height - img.height) / 4 + img.height);
  48.          }
  49.  
  50.       }
  51.    </script>
  52.  
  53. </head>
  54.  
  55. <body>
  56.  
  57.    <a href="" onClick="showCanvas('Some text.', 'imagename'); return false;">Click here</a>
  58.  
  59. </body>
  60.  
  61. </html>
RAW Paste Data
Top