DEV Community

loading...
Cover image for πŸ”₯ BUILD USER AVATAR GENERATOR IN JAVASCRIPT

πŸ”₯ BUILD USER AVATAR GENERATOR IN JAVASCRIPT

satishnaikawadi2001 profile image Satish Naikawadi Originally published at satishnaikawadi.me ・3 min read

In this post we will write a function in javascript to generate beautiful ❀️ user avatar.

First we will add img tag to our HTML in which we will render our avatar from javascript.

<img alt="Avatar" id="avatar">
Enter fullscreen mode Exit fullscreen mode

Then after that we will write a function generateAvatar() in javascript which will return src for our img tag.This function will take 3 arguments.

  1. text - The actual text to show in the avatar image.
  2. backgroundColor - The background color of the avatar image.
  3. textColor - The color of the text present in the avatar image

Now we will write the actual function to generate the avatar.

Now here firstly we will created new HTML canvas element which is used to draw graphics on a web page.Then we will call getContext() method on that instance and pass '2d' as argument to it,leading to the creation of a CanvasRenderingContext2D object representing a two-dimensional rendering context.

     const canvas = document.createElement("canvas");
     const context = canvas.getContext("2d");
Enter fullscreen mode Exit fullscreen mode

After that with the help of instance of that canvas we will set the width and height of the canvas.

            canvas.width = 200;
            canvas.height = 200;
Enter fullscreen mode Exit fullscreen mode

Then we will draw the background of the canvas. First by setting property fillStyle on context to backgroundColor we have set the background color of our canvas while by calling function fillRect() on context we will draw the actual rectangular shape on our HTML canvas.

            // Draw background
            context.fillStyle = backgroundColor;
            context.fillRect(0, 0, canvas.width, canvas.height);
Enter fullscreen mode Exit fullscreen mode

here

 context.fillRect(x, y, width, height);
Enter fullscreen mode Exit fullscreen mode
  • x - The x-axis coordinate of the rectangle's starting point.
  • y - The y-axis coordinate of the rectangle's starting point.
  • width - The rectangle's width. Positive values are to the right, and negative to the left.
  • height - The rectangle's height. Positive values are down, and negative are up.

Now after that we will draw text on the canvas

   // Draw text
    context.font = "bold 100px Assistant";
    context.fillStyle = textColor;
    context.textAlign = "center";
    context.textBaseline = "middle";
    context.fillText(text, canvas.width / 2, canvas.height / 2);
Enter fullscreen mode Exit fullscreen mode

Now this will create the canvas with background and text in it.But we have to render this into img tag. So we will call toDataURL()method on canvas which will return a data URI containing a representation of the image in the format specified by the type parameter (defaults to PNG).

And the completed function will look like below

<script>
        function generateAvatar(
            text,
            foregroundColor = "white",
            backgroundColor = "black",
            size=250
        ) {
            const canvas = document.createElement("canvas");
            const context = canvas.getContext("2d");

            canvas.width = 200;
            canvas.height = 200;

            // Draw background
            context.fillStyle = backgroundColor;
            context.fillRect(0, 0, canvas.width, canvas.height);

            // Draw text
            context.font = "bold 100px Assistant";
            context.fillStyle = foregroundColor;
            context.textAlign = "center";
            context.textBaseline = "middle";
            context.fillText(text, canvas.width / 2, canvas.height / 2);

            return canvas.toDataURL("image/png");
        }

    </script>
Enter fullscreen mode Exit fullscreen mode

Now we will use this to render avatar in our img tag as below

document.getElementById("avatar").src = generateAvatar(
            "SN",
            "white",
            "#ff3399"
        );
Enter fullscreen mode Exit fullscreen mode

This will create the following result in browser -
avatar-1.png

Now to make it circular we will add CSS border-radius property of the img to 50% as below

    <style>
        #avatar {
            border-radius: 50%;
        }
    </style>
Enter fullscreen mode Exit fullscreen mode

Which will generate following result in browser. -
avatar-2.png

Hope this will help you πŸ˜‡. Thanks for reading. You can visit my Personal Blog for more tutorials like this.

Discussion (0)

Forem Open with the Forem app