Example for Bookmarklet_Loader.js

bookmarklet_Loader-Canvas.js

/**
 * @summary     Bookmarklet_Loader
 * @description Loader for Bookmarklet - injects the required CSS and Javascript into a page
 * @file        Bookmarklet_Loader.js
 * @author      HKITAGO (hkitago.com)
 * @license     GPL v2
 * @contact     hkitago.com/contact/
 *
 * @copyright Copyright 2019- hkitago.com.
 *
 * This source file is free software, under the GPL v2 license:
 *   http://www.gnu.org/licenses/gpl-2.0.html
 */
 ((w,d)=>{
  'use strict'

  while(d.body.firstChild){d.body.removeChild(d.body.firstChild)}
  while(d.head.firstChild){d.head.removeChild(d.head.firstChild)}

  const cssText = 'html, body, canvas { margin:0; padding:0; width:100%; height:100%; overflow:hidden; background-color:black;}' + "\n"
  const sE = d.createElement('style'), tE = d.createTextNode(cssText)
  sE.appendChild(tE)
  d.head.appendChild(sE)

  const canvas = document.createElement('canvas'), ctx = canvas.getContext('2d')
  canvas.id = 'canvas'
  d.body.appendChild(canvas)

  const r = 5 * devicePixelRatio, c = 'white', speed = 7.0 * devicePixelRatio, margin = 30 * devicePixelRatio
  let x = 0 + r / 2, y = 0 + r / 2, direction = {'x':true, 'y':true}
  const render = ()=>{
    ctx.clearRect(0 ,0, canvas.width, canvas.height)

    ctx.beginPath()
    ctx.fillStyle = c

for(let i = 0, iMax = canvas.width; i < iMax; i++){
  for(let j = 0, jMax = canvas.height; j < jMax; j++){
    ctx.arc((i * margin) * j, j * margin, r, 0, Math.PI * 2.0, true)    
  }
}
ctx.fill()

  	w.requestAnimationFrame(render)
  }
  const sizing = ()=>{
    canvas.width = innerWidth * devicePixelRatio
    canvas.height = innerHeight * devicePixelRatio
  }
  w.onresize = ()=>{sizing.call(this)}
  w.onresize()
  w.requestAnimationFrame(render)
})(window,document)