How can I make rounded corners, canvas

Question

Hello I've been trying to find out how to round the corners of this XP bar I made in canvas package but all I can get too is the rectangular look I do not know how to approach the rounded border I want to add, does anyone know how I can do this?

const progressWidth = (xp / maxXp) * (canvas.width - 165);
    ctx.fillStyle = '#ffffff';
    ctx.fillRect(120, 105, progressWidth, 22);
    ctx.fillStyle = '#484b4e';
    ctx.fillRect(120 + progressWidth, 105, canvas.width - 165 - progressWidth, 22);

Full code:

const { createCanvas, loadImage } = require('canvas');

module.exports = {
  name: 'api/levelcard',
  run: async (req, res) => {
    try {
    const { levelNumber, xp, maxXp, userImage, background, rankNumber } = req.query;

    // Check if any required query parameters are missing
    if (!levelNumber || !xp || !maxXp || !userImage) {
      return res.status(400).send('Missing one or more required parameters');
    }

    // Load the background image and user image
    let bg;
    if (background) {
      bg = await loadImage(background);
    } else {
      // Create a black background with a white gradient
      bg = createCanvas(400, 200);
      const ctx = bg.getContext('2d');
      
      const gradient = ctx.createLinearGradient(0, 0, 0, bg.height);
      gradient.addColorStop(0, '#2a2e35');
      //gradient.addColorStop(1, '#FFF');
      ctx.fillStyle = gradient;
      ctx.fillRect(0, 0, bg.width, bg.height);
    }
    const userImg = await loadImage(userImage);

    // Create a new canvas and context
    const canvas = createCanvas(400, 200);
    const ctx = canvas.getContext('2d');

    // Draw the background image
    ctx.drawImage(bg, 0, 0, canvas.width, canvas.height);
      ctx.strokeStyle = '#23272a';
      ctx.lineWidth = 15;
      ctx.strokeRect(0, 0, canvas.width, canvas.height);

    // Draw the user image (rounded)
    const userImgSize = 80;
    const userImgX = 20;
    const userImgY = 20;
    const userImgRadius = userImgSize / 2;
    ctx.save();
    ctx.beginPath();
    ctx.arc(userImgX + userImgRadius, userImgY + userImgRadius, userImgRadius, 0, 2 * Math.PI);
    ctx.clip();
    ctx.drawImage(userImg, userImgX, userImgY, userImgSize, userImgSize);
    ctx.restore();

    // Draw the level text
    ctx.font = 'bold 36px Arial';
    ctx.fillStyle = '#FFF';
    ctx.fillText(`Level ${levelNumber}`, 120, 55);

  // Draw the rank text
    ctx.font = 'bold 25px Arial';
    ctx.fillStyle = '#74767b';
    ctx.fillText(`Rank ${rankNumber || 0}`, 120, 85);

    // Draw the XP progress bar
    const progressWidth = (xp / maxXp) * (canvas.width - 165);
    ctx.fillStyle = '#ffffff';
    ctx.fillRect(120, 105, progressWidth, 22);
    ctx.fillStyle = '#484b4e';
    ctx.fillRect(120 + progressWidth, 105, canvas.width - 165 - progressWidth, 22);

    // Draw the XP stats text
    ctx.font = '15px Arial';
    ctx.fillStyle = '#FFF';
    ctx.fillText(`${xp} / ${maxXp} XP`, 120, 145);

    // Convert the canvas to a PNG buffer and send it as the response
    const buffer = canvas.toBuffer('image/png');
    res.writeHead(200, {
      'Content-Type': 'image/png',
      'Content-Length': buffer.length,
      'Cache-Control': 'public, max-age=86400'
    });
    res.end(buffer);
    } catch (err) {
      console.log(err)
    }
  }
};

How can I make rounded corners, canvas

0 Answers0