Username Background

# Dynamic Username Background Generator Do you know Dice Bear? otherwise, it creates personalized avatars according to the username entered. I'm using it in my newest project (Twitch Clone), and Twitch uses it as something similar as the background of the user's channel, where the color of the channel and your username appears repeatedly, creating a very interesting effect. So, that's what we're going to create now. ## Steps - First create the html body ```html

``` - Now let's start by creating the canvas inside the script tag ```javascript const canvas = document.getElementById('usernameBackground') const ctx = canvas.getContext('2d') canvas.width = window.innerWidth canvas.height = 200 ``` - let's create our random colour and set username as desired ```javascript const randomColour = `#${Math.floor(Math.random()*16777215).toString(16)}70` document.body.style.backgroundColor = randomColour const username ='joaosan00' ``` The canvas dimensions are set to match the window width, and a random background colour is generated. Now things start to get more interesting :) - Let's set our text with low opacity ```javascript const textColour = 'rgba(211, 211, 211, 0.4)' ctx.fillStyle = textColour ctx.font = 'bold 90px Arial' ``` The provided username 'joaosan00' is rendered on the canvas at two different positions with a slightly transparent text colour. - Now... it's time to create the coolest part of the effect let's start by creating a line with the user's name that will start at the position 0 (top). End then we will create another line at the bottom where it started before position 0, in order to not leave the two username lines the same. One needs to end right after the end of the other ```javascript // Username pattern at the top let currentPosition1 = 0 while (currentPosition1 < canvas.width) { ctx.fillText(username, currentPosition1, canvas.height / 2 - 20) currentPosition1 += ctx.measureText(username).width + 40 } // Username pattern at the bottom let currentPosition2 = -60 while (currentPosition2 < canvas.width) { ctx.fillText(username, currentPosition2, canvas.height - 20) currentPosition2 += ctx.measureText(username).width + 40 } ``` - Background Application ```javascript const imageDataURL = canvas.toDataURL() document.body.style.backgroundImage = `url(${imageDataURL})` ``` - Now let's define the css ```css ``` # The complete code: ```html Username Background

``` ## 🔗 Useful links [![portfolio](https://img.shields.io/badge/my_portfolio-000?style=for-the-badge&logo=ko-fi&logoColor=white)](https://github.com/Jonorusc) [![linkedin](https://img.shields.io/badge/linkedin-0A66C2?style=for-the-badge&logo=linkedin&logoColor=white)](https://www.linkedin.com/in/jaum-lu/)

Hey there! 👋 Let's make things happen together!