Как лучше реализовать эту идею?
Занятный вопрос. Конечно, вашу идею лучше реализовывать через любой инструмент анимации. Я в них не разбираюсь, так что в качестве примера приведу анимированный gif. Это - единственный способ минимизировать задержки анимации. Сгенерировать 100 фреймов, записать в файл и заняться генерацией следующего набора фреймов.
Но в комментариях вы настаивали на том, что вам нужна real-time генерация, так что давайте подумаем о том что можно улучшить.
Основная претензия к библиотеке canvas - она непозволительно медленная для вашей задачи. Генерация каждого фрейма на моём ноуте длится 150-170ms.
wallpaper-canvas: 170.962ms
wallpaper-canvas: 156.34ms
wallpaper-canvas: 157.196ms
wallpaper-canvas: 159.465ms
wallpaper-canvas: 154.248ms
wallpaper-canvas: 158.292ms
wallpaper-canvas: 164.503ms
wallpaper-canvas: 153.939ms
wallpaper-canvas: 164.663ms
wallpaper-canvas: 154.713ms
wallpaper-canvas: 163.566ms
wallpaper-canvas: 159.067ms
Нужен нормальный инструмент
Берём sharp.
Пишем примерно такую штуку:
- делаем холст размером с ваш квадратик и заливаем чёрным
- расширяем холст до размеров экрана и заливаем "расширитель" белым
- при выгрузке в png убираем компрессию до минимума, но так, чтобы экономия на компрессии не начала влиять на время записи на диск
- и ещё одна важная штука: если писать в файл так, как это делаете вы то будут несколько мгновений когда файл картинки будет неполным, не валидным. делаем запись атомарной, при генерации пишем во временный файл, а потом переименовываем временный файл в "основное" название.
Исходник
const path = require('path');
const fs = require('fs');
const sharp = require('sharp');
const truefile = path.join(__dirname, 'image.png');
const tmpfile = path.join(__dirname, 'image.png.tmp');
const screen = {
width: 1920,
height: 1080,
};
const rect = {
width: 150,
height: 150,
x: 0,
y: 200
};
let fn;
(fn = async () => {
rect.bb = {
top: rect.y,
bottom: screen.height - rect.height - rect.y,
left: rect.x,
right: screen.width - rect.width - rect.x
};
const buf = await makeFrame();
fs.writeFileSync(tmpfile, buf);
fs.renameSync(tmpfile, truefile);
rect.x = (rect.x + 1) % (screen.width - rect.width);
setTimeout(fn, 10);
})();
/**
* @returns {Promise<Buffer>}
*/
async function makeFrame() {
const image = sharp({
create: {
width: rect.width,
height: rect.height,
channels: 3,
background: {r: 0, g: 0, b: 0}
}
});
image.extend({
...rect.bb,
background: {r: 255, g: 255, b: 255}
});
image.png({
compressionLevel: 1
});
return image.toBuffer();
}
Результат работы
Среднее время генерации фрейма на моём ноуте равно 22ms. Ускорился почти на порядок!
А дальше можно хитрить: можно узнать у операционки разрешение экрана и генерировать картинку, например, в 1.5-2 раза меньшего размера. Пускать операционка натягивает её на экран, она это умеет.
Пропорционально уменьшив в 2 раза все атрибуты rect
и rect.bb
я получил время генерации фрейма равное 9-10ms, а это уже - очень хорошее время, прям real time.

Замечу, что вызов await wallpaper.set("./image.png")
выполняется оочень долго. По сути, теперь именно он стал узким местом. Но, я уверен, можно найти быстрые низкоуровневые способы рассказать OS о том, что у неё новые обои. Я же исследовал только генерацию картинок.