dkalemis

JavaScript full screen overlay using a canvas element

Feb 12th, 2018
245
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 = "100%";
  33. canvas.height = "100%";
  34. canvas.style.position = "fixed";
  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