Build a User Profile Avatar Generator with JavaScript 🧑👩‍💻

Let's take a look at how to generate user avatars for the web using some client-side JavaScript. The tools for the job include HTML5 canvas and data URLs 🙂

This will reduce the amount of requests you have to the server side and as a result speed up your load times ⚡

Video Tutorial

As usual with my posts, if you prefer to watch a video tutorial of this, give it a watch on my YouTube channel, dcode:

Source Code

If you prefer to follow a long with code, here it is:

Writing the HTML

For the HTML, we only need a single image tag which will (eventually) hold the avatar.

<img id="avatar" alt="Avatar">

And the JavaScript...

This will work on a single function which takes in a couple of options including the text to display, a foreground color and background color.

function generateAvatar(text, foregroundColor, backgroundColor) {
    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");
}

In the first chunk of code we're doing standard procedure for canvases, creating a new canvas to work on and getting the 2D context to draw.

Next we set the width and height to the same value.

After this we draw the background by firstly setting the active fill color on the context, followed by a full-width rectangle to represent the background.

Next up is the text, and for this one we simply set the font family as well as instruct the text to be in the center, vertically and horizontally. It's then drawn on the canvas using fillText.

And lastly, we return a data URL of a PNG image for the canvas itself. We can then place the data URL in the src attribute of our <img> tag once calling the function:

document.getElementById("avatar").src = generateAvatar("SP", "white", "#009578");

And here's what we get:

Easy done. You can now generate avatar images on the client-side 😎