Как я могу создавать и взаимодействовать с элементом canvas в node.js?

Question

Я пишу многопользовательское приложение для рисования на холсте в Node.js и хочу сохранить внутренний элемент холста с текущим рисунком.Можно ли создавать и взаимодействовать с элементом canvas в Node.js?

Моей последней попыткой был доступный здесь модуль jsdom: http://github.com/tmpvar/jsdom

var jsdom = require('jsdom');
var window = jsdom.jsdom().createWindow();
var canvas = window.document.createElement('canvas');
// The following line works
canvas.setAttribute('width', 1000);
// The following line errors out on execution:
var context = canvas.getContext('2d');

Есть ли другой способпойти об этом?

Answer 1

Большие массивы Javascript не так медленны, как вы думаете (по сравнению с операциями Canvas). Я провел много тестов производительности с noVNC (клиент HTML5 VNC, который я сделал) и обнаружил, что частые манипуляции с массивами Javascript выполняются быстрее, чем операции Canvas. Это действительно будет зависеть от того, какой тип изменений вы делаете (преобразования и сложные линии, вероятно, будут быстрее, чем операции Canvas). Поэтому я бы посоветовал на самом деле протестировать производительность обоих вариантов, прежде чем принять решение.

На самом деле я провел тестирование использования массивов imageData в качестве формата хранения вместо обычных массивов Javascript, и imageData (даже если они должны быть двоичными массивами) в конечном итоге примерно на 50% медленнее (в любом случае в Chrome) :-(

Answer 2

jsdom реализует только интерфейс DOM, но контекст рисования не является частью этого интерфейса.

Чтобы получить то, что вам нужно, потребуется реализовать 2D-контекст:
http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#canvas-context-2d

Полагаю, что можно было бы сделать в JS, используя гигантский массив ... но это было бы ужасно медленно. Так что либо кто-то пойдет дальше и напишет реализацию C / C ++ для Node, либо вам не повезло, банкомат.

Полагаю, вам нужно внутреннее состояние для инициализации новых клиентов, верно? В этом случае вы можете просто поместить действия рисования в стек и отправить их клиенту, а затем клиент выталкивает стек, пока не достигнет текущего состояния чертежа.

EDIT
Хорошо, очевидно, что-то на GitHubs закончилось:
http://github.com/joshthecoder/crayon

Но не похоже, что это в любом случае готово к работе, код очень скудный и есть только тест для создания поверхности. МОЖЕТ БЫТЬ, что компоновщик совершает здесь какое-то волшебство и выставляет материал cairo на узел, но даже тогда это только представило бы функции cairo, которые они сами, и все равно придется реализовать спецификацию 2DContext поверх этого.