How to use canvas - 10 common examples

console.log("Usage: exe -i  -o  [-c ]");
        process.exit(1);
    }

    let configPath = args.c;
    if (typeof configPath === "undefined") {
        configPath = path.join(process.cwd(), "settings.json");
    } else {
        if (!path.isAbsolute(configPath)) {
            configPath = path.join(process.cwd(), configPath);
        }
    }

    const settings: CLISettings = require(configPath);

    const img = await canvas.loadImage(imagePath);
    const c = canvas.createCanvas(img.width, img.height);
    const ctx = c.getContext("2d");
    ctx.drawImage(img, 0, 0, c.width, c.height);
    let imgData = ctx.getImageData(0, 0, c.width, c.height);

    // resize if required
    if (settings.resizeImageIfTooLarge && (c.width > settings.resizeImageWidth || c.height > settings.resizeImageHeight)) {
        let width = c.width;
        let height = c.height;
        if (width > settings.resizeImageWidth) {
            const newWidth = settings.resizeImageWidth;
            const newHeight = c.height / c.width * settings.resizeImageWidth;
            width = newWidth;
            height = newHeight;
        }
        if (height > settings.resizeImageHeight) {

}
        var res = {
            boxes: detectedBoxes,
            names: detectedNames,
            inferenceTime: endTime - startTime
        };
        console.log(res);

        // create canvas and context
        const width=1024
        const height=768
        const canvas = createCanvas(width, height);
        const context = canvas.getContext('2d');

        // create image from buffer
        const img = new Image()
        img.onload = () => {
            // draw image in context
            context.drawImage(img, 0, 0, width, height);
            // draw boxes from model's detection boxes
            for (let i = 0; i < res.boxes.length; i++) {
                const box = res.boxes[i];
                context.fillStyle = 'rgba(255,255,255,0.2';
                context.strokeStyle = 'white';
                context.fillRect(box[1] * width, box[0] * height, width * (box[3] - box[1]),
                    height * (box[2] - box[0]));
                context.font = '15px Arial';
                context.fillStyle = 'white';
                context.fillText(res.names[i], box[1] * width, box[0] * height, box[0] * height);
                context.lineWidth = 2;
                context.strokeRect(box[1] * width, box[0] * height, width * (box[3] - box[1]),
                    height * (box[2] - box[0]));

const fontScale = 1.2,
    canvas = createCanvas(width, height),
    ctx = canvas.getContext('2d');

  // TODO: 渐变背景
  // const grd=cxt.createLinearGradient(0, 0, width, height);
  // grd.addColorStop(0, "#FF0000");

  if (bgColor) {
    ctx.fillStyle = bgColor;
    ctx.fillRect(0, 0, width, height);
  }

  if (bgImage) {
    let image = new Image();
    if (bgImage.startsWith('http')) {
      image = await loadImage(bgImage);
    } else if (bgImage.startsWith('data:image/')) image.src = bgImage;
    else image.src = await readFile(bgImage);
    ctx.drawImage(image, 0, 0, width, height);
  }

  let fontSize = Number(fontStyle.split(' ')[0].replace('px', ''));
  ctx.font = fontStyle;
  ctx.fillStyle = fontColor;
  if ((fontSize * bookName.length) / height > 0.6) {
    ctx.font = fontStyle.replace(`${fontSize}px`, `${fontSize / fontScale}px`);
    fontSize /= fontScale;
  }

  const fontHeight = fontSize + fontSize / 4;

const canvas = createCanvas(imageD, imageD);
      const ctx = canvas.getContext('2d');
      ctx.quality = 'fast';
      ctx.patternQuality = 'fast';

      // resize their image so we don't have to do it each time.
      const ctxResize = canvas.getContext('2d');
      ctxResize.drawImage(theirImage, 0, 0, imageD, imageD);
      const buffer = canvas.toBuffer('image/jpeg', undefined);
      theirImage.src = Buffer.from(buffer);

      // loop over all images.
      const length = (images.length > 65) ? 65 : images.length;
      for (let i = 0; i < length - 1; i += 1) {
        ctx.globalAlpha = 1;
        const background = new Image();
        background.src = Buffer.from(images[i]);
        ctx.drawImage(background, 0, 0, imageD, imageD);

        // get buffer and resize our image to our length
        ctx.globalAlpha = 0.5;
        ctx.drawImage(theirImage, 0, 0, imageD, imageD);
        encoder.addFrame(ctx);
      }
      encoder.finish();

      return await myAccumulator.getBuffer();
    } catch (error) {
      console.error(error);
    }
    return undefined;
  },

loadComplete (file) {

        //  Draw the image

        const ctx = GetContext(this.canvas);

        ctx.drawImage(file.data, 0, 0);

        const imageData = GetImageData(ctx);

        const bounds = GetBounds(imageData);

        console.log(bounds);

        ctx.strokeStyle = '#ff00ff';
        ctx.strokeRect(bounds.x, bounds.y, bounds.width, bounds.height);

    }

loadComplete (file) {

        //  Draw the image

        const ctx = GetContext(this.canvas);

        ctx.drawImage(file.data, 0, 0);

        const imageData = GetImageData(ctx);

        console.log(imageData.width, 'x', imageData.height);

        console.log('Index 0', GetXY(imageData, 0)); // 0x0
        console.log('Index 4', GetXY(imageData, 4)); // 1x0
        console.log('Index 40', GetXY(imageData, 40)); // 10x0
        console.log('Index 1280', GetXY(imageData, 1280)); // 0x1
        console.log('Index 41088', GetXY(imageData, 41088)); // 32x32
        console.log('Index 254888', GetXY(imageData, 254888)); // 42x199
        console.log('Index 4148', GetXY(imageData, 4148)); // 77x3
        console.log('Index 227876', GetXY(imageData, 227876)); // 9x178
        console.log('Index 255996', GetXY(imageData, 255996)); // 319x199

const Canvas = require("canvas"),
fortnite = require("fortnite-9812"),
fs = require("fs"),
CronJob = require("cron").CronJob,
Discord = require("discord.js");
const { resolve } = require("path");
// Register assets fonts
Canvas.registerFont(resolve("./assets/fonts/Burbank-Big-Condensed-Bold-Font.otf"), { family: "Burbank" });

const langList = fs.readdirSync("./languages/").map((f) => f.split(".")[0]);

const applyItemName = (canvas, text) => {
    const ctx = canvas.getContext("2d");
    // Declare a base size of the font
    let fontSize = 40;
    do {
        ctx.font = `${fontSize -= 5}px Burbank`;
    } while (ctx.measureText(text).width > 260);
    return ctx.font;
};

/**
 * Delete old png files
 */

constructor () {

        this.canvas = Canvas(512, 256);

        BackgroundColor(this.canvas, 'rgb(0, 0, 50)');

        AddToDOM(this.canvas, 'game');

        this.ctx = this.canvas.getContext('2d');

        this.ctx.fillStyle = 'rgba(255, 255, 255, 1)';
        this.ctx.font = '14px Courier';

        this.master = new MasterClock();

        this.clock1 = this.master.add(1000/60); // 60fps
        this.clock2 = this.master.add(1000/30); // 30fps
        this.clock3 = this.master.add(1000); // 1fps

        this.master.init(() => this.update());

//  Draw the image

        const ctx = GetContext(this.canvas);

        ctx.drawImage(file.data, 0, 0);

        const imageData = GetImageData(ctx);

        console.log(imageData.width, 'x', imageData.height, 'len', imageData.data.length);

        console.log('0 x 0 - index', GetIndex(imageData, 0, 0));
        console.log('1 x 0 - index', GetIndex(imageData, 1, 0));
        console.log('10 x 0 - index', GetIndex(imageData, 10, 0));
        console.log('0 x 1 - index', GetIndex(imageData, 0, 1));
        console.log('32 x 32 - index', GetIndex(imageData, 32, 32));
        console.log('42 x 199 - index', GetIndex(imageData, 42, 199));
        console.log('77 x 3 - index', GetIndex(imageData, 77, 3));
        console.log('9 x 178 - index', GetIndex(imageData, 9, 178));
        console.log('319 x 199 - index', GetIndex(imageData, 319, 199));

    }

loadComplete (file) {

        //  Draw the image

        const ctx = GetContext(this.canvas);

        ctx.drawImage(file.data, 0, 0);

        const imageData = GetImageData(ctx);

        console.log(imageData.width, 'x', imageData.height, 'len', imageData.data.length);

        console.log('0 x 0 - index', GetIndex(imageData, 0, 0));
        console.log('1 x 0 - index', GetIndex(imageData, 1, 0));
        console.log('10 x 0 - index', GetIndex(imageData, 10, 0));
        console.log('0 x 1 - index', GetIndex(imageData, 0, 1));
        console.log('32 x 32 - index', GetIndex(imageData, 32, 32));
        console.log('42 x 199 - index', GetIndex(imageData, 42, 199));
        console.log('77 x 3 - index', GetIndex(imageData, 77, 3));
        console.log('9 x 178 - index', GetIndex(imageData, 9, 178));
        console.log('319 x 199 - index', GetIndex(imageData, 319, 199));

    }