"MiniPaint" in Discord using Canvas?

Question

Canvas

I have code:

bad code

client.on('message', async(message) => {
  if(message.content == '!test') {
    let current = {
      x: 0,
      y: 0
    }
    const width = 1024;
    const height = 1024;
    const canvas = createCanvas(width, height);
    const context = canvas.getContext('2d');
    context.fillStyle = '#fff';
    context.fillRect(0, 0, width, height);
    context.fillStyle = '#ff0000';
    context.fillRect(current.x * 16, current.y * 16, 16, 16);
    let buffer = canvas.toBuffer('image/png');
    fs.writeFileSync(message.author.id + '.png', buffer);
    let attachment = new Discord.MessageAttachment(buffer, 'kaguya.ootsutsukii.png');
    message.channel.send(new Discord.MessageEmbed().setDescription('Рисовать можно только 10 минут :3').attachFiles(attachment).setImage('attachment://kaguya.ootsutsukii.png')).then(async(msg) => {
      await msg.react('◀')
      await msg.react('')
      await msg.react('')
      await msg.react('▶')
      const filter = (reaction, user) => user.id != client.user.id;
      const collector = msg.createReactionCollector(filter, { time: 600000 });
      collector.on('collect', async(reaction, user) => {
        switch(reaction.emoji.name) {
          case "◀":
            reaction.users.remove(user.id);
            if(current.x = 0) return;
            console.log('Нарисовано <')
            context.fillStyle = '#0099ff';
            context.fillRect(current.x * 16, current.y * 16, 16, 16);
            current.x--;
            context.fillStyle = '#ff0000'
            context.fillRect(current.x * 16, current.y * 16, 16, 16);
            buffer = canvas.toBuffer('image/png');
            fs.writeFileSync(message.author.id + '.png', buffer);
            msg.edit(new Discord.MessageEmbed().setDescription('Рисовать можно только 10 минут :3').attachFiles(new Discord.MessageAttachment(buffer, 'kaguya.ootsutsukii.png')).setImage('attachment://kaguya.ootsutsukii.png'))
            break;
          case "":
            reaction.users.remove(user.id);
            if(current.y = 64) return;
            console.log('Нарисовано вниз')
            context.fillStyle = '#0099ff';
            context.fillRect(current.x * 16, current.y * 16, 16, 16);
            current.y++;
            context.fillStyle = '#ff0000'
            context.fillRect(current.x * 16, current.y * 16, 16, 16);
            buffer = canvas.toBuffer('image/png');
            fs.writeFileSync(message.author.id + '.png', buffer);
            msg.edit(new Discord.MessageEmbed().setDescription('Рисовать можно только 10 минут :3').attachFiles(new Discord.MessageAttachment(buffer, 'kaguya.ootsutsukii.png')).setImage('attachment://kaguya.ootsutsukii.png'))
            break;
          case "":
            reaction.users.remove(user.id);
            if(current.y = 0) return;
            console.log('Нарисовано вверх')
            context.fillStyle = '#0099ff';
            context.fillRect(current.x * 16, current.y * 16, 16, 16);
            current.y--;
            context.fillStyle = '#ff0000'
            context.fillRect(current.x * 16, current.y * 16, 16, 16);
            buffer = canvas.toBuffer('image/png');
            fs.writeFileSync(message.author.id + '.png', buffer);
            msg.edit(new Discord.MessageEmbed().setDescription('Рисовать можно только 10 минут :3').attachFiles(new Discord.MessageAttachment(buffer, 'kaguya.ootsutsukii.png')).setImage('attachment://kaguya.ootsutsukii.png'))
            break;
          case "▶":
            reaction.users.remove(user.id);
            if(current.x = 64) return;
            console.log('Нарисовано >')
            context.fillStyle = '#0099ff'
            context.fillRect(current.x * 16, current.y * 16, 16, 16);
            current.x++;
            context.fillStyle = '#ff0000'
            context.fillRect(current.x * 16, current.y * 16, 16, 16);
            buffer = canvas.toBuffer('image/png');
            fs.writeFileSync(message.author.id + '.png', buffer);
            msg.edit(new Discord.MessageEmbed().setDescription('Рисовать можно только 10 минут :3').attachFiles(new Discord.MessageAttachment(buffer, 'kaguya.ootsutsukii.png')).setImage('attachment://kaguya.ootsutsukii.png'))
            break;
        }
      })
    })
  }
})

But I'm not very familiar with Canvas, so my code doesn't work (I don't know why).
What's wrong?

Answer 1

Help is no longer needed.