Изменение слоя в jCanvas

Рисую, используя jCanvas. Создала текст, который меняет цвет при наведении мыши. Но я использую setLayer, то есть, получается, создаю новый слой. Поэтому новая надпись исчезает при наведении мыши. Непонятно только почему на весь слой, а не только на первый текст.
Мне нужно, чтобы первый текст по-прежнему менял цвет при наведении мыши, но все остальное оставалось неизменным.
Демо
$('canvas').drawText({ fillStyle: 'green', strokeWidth: 2, x: 150, y: 100, fontSize: 48, fontFamily: 'Verdana, sans-serif', text: 'Hello', layer: true, mouseover: function(layer) { $(this).setLayer(layer, { fillStyle:'red', }) .drawLayers(); }, mouseout: function(layer) { $(this).setLayer(layer, { fillStyle:'green' }) .drawLayers(); }, });
$('canvas').drawText({ x: 150, y: 300, fillStyle: 'green', strokeWidth: 2, fontSize: 34, text: 'Hello' })

Ответ

Проблема заключается в том, что у второго текста не установлено свойство layer: true. Как результат - его нет в списке слоёв, и при вызове .drawLayers(); он перестаёт быть видимым.
Исправленный код:
var $canvas = $('canvas'); $canvas.drawText({ fillStyle: 'green', strokeWidth: 2, x: 150, y: 100, fontSize: 48, fontFamily: 'Verdana, sans-serif', text: 'Hello', layer: true, mouseover: function(layer) { $(this).setLayer(layer, { fillStyle: 'red' }).drawLayers(); }, mouseout: function(layer) { $(this).setLayer(layer, { fillStyle: 'green' }).drawLayers(); } }); $canvas.drawText({ x: 150, y: 300, fillStyle: 'green', strokeWidth: 2, fontSize: 34, text: 'Hello', layer: true });
Полный пример в jCanvas Sandbox