Background.js

background/MatrixRain.js

Syntax

constructor

MatrixRain(canvas : HTMLCanvasElement,options?: {characters : string;fontSize : number;fontColor : string;fadeColor : string;fps : number;}) : MatrixRain

canvas : HTMLCanvasElement : The background canvas

characters : string : Character string to display
fontSize : number : Font size
fontColor : string : Color of the font characters
fadeColor : string : Color to fade out
fps : number : Frames per second

methodes

MatrixRain.resize(width : number,height : number) : void

width : number : The new width of the canvasheight : number : The new height of the canvas

Resize the canvas.

Example

normal

import{MatrixRain}from'./background/MatrixRain.js'// get the canvas element by idconstcanvas=document.getElementById('background')// create new MatrixRainconstmatrixRain=newMatrixRain(canvas)// resize to full window width and heightmatrixRain.resize(window.innerWidth,window.innerHeight)window.addEventListener('resize',()=>{matrixRain.resize(window.innerWidth,window.innerHeight)})

linear gradient

import{MatrixRain}from'./background/MatrixRain.js'// get the canvas element by idconstcanvas=document.getElementById('background')// get context of canvasconstctx=canvas.getContext('2d')// create linear gradientconstgradient=ctx.createLinearGradient(window.innerWidth/2,0,window.innerWidth/2,window.innerHeight)gradient.addColorStop(0.0,'red')gradient.addColorStop(0.2,'yellow')gradient.addColorStop(0.4,'green')gradient.addColorStop(0.6,'cyan')gradient.addColorStop(0.8,'blue')gradient.addColorStop(1.0,'magenta')// create new MatrixRainconstmatrixRain=newMatrixRain(canvas,{fontColor: gradient})// resize to full window width and heightmatrixRain.resize(window.innerWidth,window.innerHeight)window.addEventListener('resize',()=>{matrixRain.resize(window.innerWidth,window.innerHeight)})

---