Canvas | SpeakJS | Page 1

misty cypress Jun 22, 2025, 3:48 PM

#

wdym "make the arrangement"? what are you asking for?

hushed vine Jun 22, 2025, 5:13 PM

#

Scaling?

misty cypress Jun 22, 2025, 5:19 PM

#

that clarifies nothing

slender spear Jun 22, 2025, 8:58 PM

#

Are you trying to combine a discord bot and node-canvas? You can modify the width and height properties if what you want is resizing

hushed vine Jun 24, 2025, 5:20 PM

#

slender spear Are you trying to combine a discord bot and `node-canvas`? You can modify the `w...

hmm yeah I know but I am creating dogshit

#

 const canvasWidth = 379;
    const canvasHeight = 646;
    const canvas = createCanvas(canvasWidth, canvasHeight);
    const ctx = canvas.getContext('2d');

    ctx.fillStyle = '#0F0F0F';
    ctx.fillRect(0, 0, canvasWidth, canvasHeight);

   
    ctx.font = "bold 20px sans-serif";
    ctx.fillStyle = "#FFFFFF";
    ctx.textAlign = "center";
    ctx.fillText(buildName, canvasWidth / 2, 30);
           
    const killerIconSize = 120;
    const killerIconX = canvasWidth - killerIconSize - 10;
    const killerIconY = 10;
    ctx.drawImage(killerImage, killerIconX, killerIconY, killerIconSize, killerIconSize);

   
    const centerX = canvasWidth / 2;
    const centerY = canvasHeight / 2;
    const offset = 64;
    const shiftY = -100;
  
    const originalWidth = perkImages[0].width;
    const originalHeight = perkImages[0].height;
    const scaledWidth = originalWidth / 2;
    const scaledHeight = originalHeight / 2;
    const perkPositions = [
      [centerX - scaledWidth / 2, centerY - offset - scaledHeight / 2 + shiftY],
      [centerX - offset - scaledWidth / 2, centerY - scaledHeight / 2 + shiftY],   
      [centerX + offset - scaledWidth / 2, centerY - scaledHeight / 2 + shiftY],  
      [centerX - scaledWidth / 2, centerY + offset - scaledHeight / 2 + shiftY]   
    ];
    perkImages.forEach((img, index) => {
      if (index >= perkPositions.length) return;
      const [x, y] = perkPositions[index];
      ctx.drawImage(img, x, y, scaledWidth, scaledHeight);
    });

  
    const addonIconSize = 70;
    const gap = 20;
    const totalRowWidth = addonIconSize * 3 + gap * 2;
    const startX = Math.floor((canvasWidth - totalRowWidth) / 2);
    const addonY = canvasHeight - addonIconSize - 20;
    const positionsRow = [
      [startX, addonY],
      [startX + addonIconSize + gap, addonY],
      [startX + 2 * (addonIconSize + gap), addonY]
    ];
   
    ctx.drawImage(addon1Image, positionsRow[0][0], positionsRow[0][1], addonIconSize, addonIconSize);
   
    ctx.drawImage(offeringImage, positionsRow[1][0], positionsRow[1][1], addonIconSize, addonIconSize);
    ctx.drawImage(addon2Image, positionsRow[2][0], positionsRow[2][1], addonIconSize, addonIconSize);

    ctx.font = "12px sans-serif";
    ctx.fillStyle = "#FFFFFF";
    ctx.textAlign = "center";
    ctx.fillText(addon1, positionsRow[0][0] + addonIconSize / 2, positionsRow[0][1] + addonIconSize + 15);
    ctx.fillText(offering, positionsRow[1][0] + addonIconSize / 2, positionsRow[1][1] + addonIconSize + 15);
    ctx.fillText(addon2, positionsRow[2][0] + addonIconSize / 2, positionsRow[2][1] + addonIconSize + 15);

 
    const buffer = canvas.encodeSync('png');
    const imageAttachment = new AttachmentBuilder(buffer, { name: 'killerbuild.png' });

#

#Canvas