Introduzione a Fabric.js

In questo articolo esaminiamo Fabric.js, una potente libreria JavaScript che rende il lavoro con HTML5 Canvas una passeggiata di salute.

Fabric fornisce un modello a oggetti che mancava al canvas, come anche un parser SVG, un livello di interattività, e una suite completa di altri strumenti indispensabili. È un progetto completamentee open-source, sotto licenza MIT con numerosi contribuiti nel corso degli anni.

Ho iniziato a sviluppare con Fabric tre anni fam dopo aver sofferto lavorando con le API native di canvas. Stavo creando un editor interattivo per la progettazione per printio.ru, la mia startup che permette agli utenti di progettare creazioni per l'abbigliamento. Il tipo di interattività che cercavo esisteva solo in applicazioni Flash in quei giorni. Oggi molte poche librerie si avvicinano alle possibilità che offre Fabric, diamo un'occhiata più da vicino.

Perché Fabric?

Canvas permette di creare della grafica assolutamente impressionante oggi, ma l'API che fornisce è di livello molto deludente. Una cosa è disegnare alcune forme di base su canvas e poi dimenticarsi di loro, ma se avete bisogno di un qualsiasi tipo di interazione, di modificare un'immagine in qualsiasi momento, o di disegnare forme più complesse, la situazione cambia drasticamente. Fabric mira a risolvere questo problema.

I metodi canvas nativi consentono solo di eseguire semplici comandi grafici, modificando la bitmap dell'intero pannello. Volete disegnare un rettangolo? Utilizzate fillRect (left, top, width, height). Volete tracciare una linea? Utilizzate una combinazione di moveTo (a sinistra, in alto) e lineTo (x, y). È come dipingere su tela con un pennello sovrapponendo più strati di olio o acrilico sulla superficie, con pochissimo controllo.

Invece di operare ad un simile basso livello, Fabric fornisce un modello a oggetti semplice, ma potente, come strato superiore a quello dei metodi nativi. Si prende cura dello stato del canvas e del disegno permettendoci di lavorare direttamente con degli oggetti.

Ecco un semplice esempio che dimostra questa diggerenza: diciamo di voler disegnare un rettangolo rosso da qualche parte sul canvas. Ecco come dovremmo fare con le canvas API native:

// crea un riferimento all'elemento canvas (con id="c")
var canvasEl = document.getElementById('c');
// acquisisce il contesto 2d per disegnare (la "bitmap" di cui parlavamo)
var ctx = canvasEl.getContext('2d');
// imposta il colore di riempimento per il contesto
ctx.fillStyle = 'red';
// crea il rettanfolo nel punto 100,100 , con dimensioni 20x20
ctx.fillRect(100, 100, 20, 20);

Il codice seguente mostra come fare lo stesso con Fabric. Il risultato è il medesimo ed è mostrato in figura 1.

// crea un wrapper intorno all'elemento canvas (con id="c")
var canvas = new fabric.Canvas('c');
// crea un oggetto rettangolo
var rect = new fabric.Rect({
  left: 100,
  top: 100,
  fill: 'red',
  width: 20,
  height: 20
});
// aggiunge il rettangolo alla tela
canvas.add(rect);

Fino a questo punto, non c'è quasi differenza nella dimensione del codice, i due esempi sono piuttosto simili. In ogni caso si vede già quanto sia differente l'approccio di lavoro. Con i metodi nativi si opera su un context, un oggetto che rappresenta l'intera bitmap del canvas. In Fabric, si opera con oggetti: si istanziano, se ne modificano le proprietà e si aggiungono al canvas. Nel mondo di Fabric questi oggetti sono cittadini di prima classe.

Disegnare un semplice rettangolo rosso è facile. Ci si potrebbe divertire a ruotarlo leggermente. Proviamo con 45 gradi, prima utilizzando i metodi nativi di canvas:

var canvasEl = document.getElementById('c');
var ctx = canvasEl.getContext('2d');
ctx.fillStyle = 'red';
ctx.translate(100, 100);
ctx.rotate(Math.PI / 180 * 45);
ctx.fillRect(-10, -10, 20, 20);

Ed ecco come farlo con Fabric (in Figura 2 i risultati):

var canvas = new fabric.Canvas('c');
// crea un rettangolo con angolo angle=45
var rect = new fabric.Rect({
  left: 100,
  top: 100,
  fill: 'red',
  width: 20,
  height: 20,
  angle: 45
});
canvas.add(rect);

Cosa succede qui? Tutto ciò che bisogna fare in Fabric è cambiare l'angolo dell'oggetto ad un valore di 45. Con i metodi nativi invece c'è più lavoro da fare: non si può operare con oggetti, invece bisogna modificare la posizione e l'angolo dell'intera bitmap del canvas (ctx.translate, ctx.rotate) e poi ridisegnare il rettangolo ricordando di compensare la posizione correttamente (-10, -10) perché questo appaia sempre al punto 100,100. In più, è necessario tradurre i gradi in radianti per ruotare la bitmap.

Sono certo che iniziate a capire perché esiste Fabric e quanto lavoro di basso livello nasconda.

Diamo un'occhiata ad un altro esempio: tenere traccia dello stato del canvas.

E se a un certo punto voleste spostare il rettangolo in una posizione leggemente diversa del canvas? Come si può fare senza la possibilità di operare con gli oggetti? Basta chiamare un altra fillRect sulla bitmap? Non proprio. Chiamare un altro comando fillRect in realtà disegna un rettangolo sopra a quanto già disegnato sulla tela. Per spostare il rettangolo, è necessario cancellare prima ogni contenuto precedentemente disegnato e quindi disegnare il rettangolo in una nuova posizione (si veda la Figura 3).

var canvasEl = document.getElementById('c');
...
ctx.strokRect(100, 100, 20, 20);
...
// erase entire canvas area
ctx.clearRect(0, 0, canvasEl.width, canvasEl.height);
ctx.fillRect(20, 50, 20, 20);

Ecco come si risolve con Fabric:

var canvas = new fabric.Canvas('c');
...
canvas.add(rect);
...
rect.set({ left: 20, top: 50 });
canvas.renderAll();

Da notare una differenza molto importante: con Fabric, non è necessario cancellare il contenuto prima di modificarlo. Basta lavorare con gli oggetti semplicemente modificandone le proprietà e disegnare il canvas di nuovo per ottenere la nuova immagine.

Gli oggetti

Nella sezione precedente abbiamo visto come lavorae con rettangoli istanziando il costruttore fabric.Rect.

Fabric, naturalmente, fornisce anche le altre forme basilari come cerchi, triangoli, ellissi, e così via. Le forme sono esposte sotto il "namespace" fabric come fabric.Circle, fabric.Triangle, fabric.Ellipse, etc. Fabric fornisce sette forme di base:

• fabric.Circle
• fabric.Ellipse
• fabric.Line
• fabric.Polygon
• fabric.Polyline
• fabric.Rect
• fabric.Triangle

Per disegnare un cerchio, è sufficiente creare un oggetto cerchio e aggiungerlo alla tela.

var circle = new fabric.Circle({
  radius: 20, fill: 'green', left: 100, top: 100
});
var triangle = new fabric.Triangle({
  width: 20, height: 30, fill: 'blue', left: 50, top: 50
});
canvas.add(circle, triangle);

La stessa cosa vale per qualsiasi altra forma di base. La figura 4 mostra un esempio di un cerchio verde disegnata in corrispondenza 100.100 e un triangolo blu a 50,50.

Manipolare gli oggetti

La creazione di oggetti grafici come rettangoli, cerchi, o altro è solo l'inizio. Ad un certo punto, si avrà probabilmente bisogno di modificare gli oggetti. Una certa azione potrebbe attivare un cambiamento di stato o lanciare un'animazione di qualche tipo. Oppure si potrebbe desiderare di modificare le proprietà degli oggetti (ad esempio il colore, l'opacità, dimensione, posizione) in base a determinati azioni del mouse.

Fabric si occupa del rendering del canvas e della gestione dello stato al nostro posto. Noi dobbiamo solo modificare gli oggetti. Uno degli esempi precedenti mostrava il metodo set e come invocarlo (set({ left: 20, top: 50 }) ) avesse spostato l'oggetto dalla sua posizione precedente. In modo simile, è possibile modificare qualsiasi altra proprietà di un oggetto.

Come ci si potrebbe aspettare, gli oggetti Fabric posseggono proprieta relative:

• alla posizione (left, top);
• alle dimensioni (width, height);
• al rendering (fill, opacity, stroke, strokeWidth);
• a di scala e rotazione (scaleX, scaleY, angle)
• alla riflessione delle immagini (flipX, flipY)

Sì, la creazione di oggetti capovolti in Fabric è facile come impostare la proprietà flip* a true.

È possibile leggere e scrivere queste proprietà tramite metodi get e set. Ecco un esempio di come modificare alcune delle proprietà del rettangolo rosso. La Figura 5 mostra i risultati.

var canvas = new fabric.Canvas('c');
...
canvas.add(rect);
rect.set('fill', 'red');
rect.set({ strokeWidth: 5, stroke: 'rgba(100,200,200,0.5)' });
rect.set('angle', 15).set('flipY', true);

In primo luogo, il valore di riempimento è impostato su red. L'istruzione successiva imposta i valori di strokeWidth e stroke, dando il rettangolo un bordo di 5px di colore verde chiaro. Infine, il codice modifica le proprietà angle e flipY. Si noti come ciascuna delle tre istruzioni utilizzi una sintassi leggermente diversa.

Ciò dimostra che set è un metodo universale. Probabilmente lo useremo molto spesso, ed è pensato per essere il più comodo possibile. Che dire dei metodi getter? C'è un metodo generico get ed un certo numero di getter specifici: per leggere la proprietà width di un oggetto, si utilizza get('width') o getWidth(); per ottenere il valore scaleX, utilizzare get('scaleX'), getScaleX() e così via. C'è un metodo come getWidth o getScaleX per ciascuna delle proprietà "pubbliche" dell'oggetto (stroke, strokeWidth, angle, etc.).

Potreste aver notato che, negli esempi precedenti, gli oggetti sono stati creati e configurati con lo stessa firma che abbiamo utilizzato nel metodo set. È possibile "configurare" un oggetto al momento della creazione o utilizzare il metodo set in seguito:

var rect = new fabric.Rect({ width: 10, height: 20, fill: '#f55', opacity: 0.7 });
// o in modo funzionalmente identico:
var rect = new fabric.Rect();
rect.set({ width: 10, height: 20, fill: '#f55', opacity: 0.7 });

Opzioni di Default

A questo punto potreste chiedervi cosa succede quando creiamo un oggetto senza passare alcun oggetto per òa configurazione. Avrà sempre quelle proprietà? Sì. Quando omettiamo impostazioni specifiche nella creazione, gli oggetti in Fabric hanno sempre un insieme predefinito di proprietà. È possibile utilizzare il codice riportato di seguito per verificare:

var rect = new fabric.Rect(); // notare che non vengono passate opzioni
rect.getWidth(); // 0
rect.getHeight(); // 0
rect.getLeft(); // 0
rect.getTop(); // 0
rect.getFill(); // rgb(0,0,0)
rect.getStroke(); // null
rect.getOpacity(); // 1

Questo rettangolo ha un insieme di proproetà di default. È posizionato a 0,0, è nero e completamente opaco, e non ha bordo e non ha dimensioni (larghezza e altezza sono 0). Poiché non è definita alcuna dimensione, non è visibile sulla tela. Assegnare dei valori positivi a larghezza e altezza svelerebbe un rettangolo nero in alto a sinistra sul canvas, come mostrato in Figura 6.

Gerarchia e ereditarietà

Gli oggetti Fabric non esistono indipendentemente l'uno dall'altro. Essi formano una gerarchia molto precisa. La maggior parte degli oggetti ereditano dalla root fabric.Object.

L'oggetto principale fabric.Object rappresenta (più o meno) una forma bidimensionale, posizionata su un piano bidimensionale. È un'entità che possiede proprietà left/top e width/height, così come un gran numero di altre caratteristiche grafiche. Le proprietà elencate per gli oggetti (fill, stroke, angle, opacity, flip*, etc.) sono comuni a tutti gli oggetti Fabric che ereditano da fabric.Object.

Questa ereditarietà consente di definire metodi su fabric.Object e di condividerli tra tutte le "classi" figlio. Ad esempio, se si desidera avere un metodo getAngleInRadians in tutti gli oggetti, è sufficiente semplicemente crearlo sul fabric.Object.prototype, come segue:

fabric.Object.prototype.getAngleInRadians = function() {
  return this.getAngle() / 180 * Math.PI;
};
var rect = new fabric.Rect({ angle: 45 });
rect.getAngleInRadians(); // 0.785...
var circle = new fabric.Circle({ angle: 30, radius: 10 });
circle.getAngleInRadians(); // 0.523...
circle instanceof fabric.Circle; // true
circle instanceof fabric.Object; // true

Come si può vedere, il metodo diventa immediatamente disponibile per tutte le istanze.

Anche se le "classi" figlie ereditano da fabric.Object, spesso deifiniscono metodi propri e proprietà. Ad esempio, fabric.Circle ha bisogno di una proprietà raggio, e fabric.Image - che vedremo tra un momento - ha bisogno di metodi GetElement e setElement per accedere e impostare l'elemento HTML <img> da cui proviene l'istanza dell'immagine.

Canvas

Ora che abbiamo esaminato alcuni dettagli degli oggetti possiamo tornare al canvas.

La prima cosa che si vede in tutti gli esempi di Fabric è la creazione di un oggetto canvas (new fabric.Canvas('...')).

L'oggetto fabric.Canvas serve come wrapper per l'elemento <canvas> ed è responsabile della gestione di tutti gli oggetti Fabric su quel particolare canvas. Prende come parametro l'ID di un elemento e ritorna un'istanza di fabric.Canvas.

Possiamo aggiungere oggetti, referenziarli o rimuoverli, come mostrato qui:

var canvas = new fabric.Canvas('c');
var rect = new fabric.Rect();
canvas.add(rect); // add object
canvas.item(0); // reference fabric.Rect added earlier (first object)
canvas.getObjects(); // get all objects on canvas (rect will be first and only)
canvas.remove(rect); // remove previously-added fabric.Rect

La gestione degli oggetti è lo scopo principale di fabric.Canvas, ma serve anche come un host di configurazione. Avete bisogno di impostare il colore di sfondo o l'immagine di una intera area, tagliare tutti i contenuti di una certa area, impostare una diversa larghezza e altezza, o specificare se una tela è interattivo o no? Tutte queste opzioni (e altre) possono essere impostate su fabric.Canvas, sia al momento della creazione sia dopo. Il codice seguente mostra un esempio:

var canvas = new fabric.Canvas('c', {
  backgroundColor: 'rgb(100,100,200)',
  selectionColor: 'blue',
  selectionLineWidth: 2
  // ...
});
// oppure
var canvas = new fabric.Canvas('c');
canvas.backgroundImage = 'http://...';
canvas.onFpsUpdate = function(){ /* ... */ };
// ...

Interattività

Una delle caratteristiche uniche incorporate in Fabric è lo strato di interattività al di sopra del modello a oggetti.

Il modello a oggetti esiste per consentire l'accesso e la manipolazione di oggetti sulla tela, ma all'esterno, a livello utente, c'è un modo per manipolare questi oggetti con il mouse (o tramite tocco su dispositivi touch). Non appena si inizializza un elemento canvas, con new fabric.Canvas('...'), è possibile selezionare gli oggetti (vedi Figura 7), trascinarli in giro, ridimensionarli o ruotarli, e persino raggrupparli (vedi Figura 8) per maneggiarli come fossero un unico pezzo!

Se volete permettere agli utenti di trascinare qualcosa sul canvas (diciamo un'immagine), tutto ciò di cui avete bisogno è inizializzareil canvas e aggiungervi l'oggetto. Non è richiesta alcuna altra configurazione.

Per controllare questa interattività, potete utilizzare la proprietà booleana selection di Fabric sull'oggetto canvas in combinazione con la proprietà booleana selectable dei singoli oggetti:

var canvas = new fabric.Canvas('c');
...
canvas.selection = false; // disable group selection
rect.set('selectable', false); // make object unselectable

Ma cosa succede se non si desidera proprio un livello di interattività? In questo caso, si può sempre sostituire fabric.Canvas con fabric.StaticCanvas. La sintassi per l'inizializzazione è assolutamente la stessa:

var staticCanvas = new fabric.StaticCanvas('c');
staticCanvas.add(
  new fabric.Rect({
    width: 10, height: 20,
    left: 100, top: 100,
    fill: 'yellow',
    angle: 30
  }));

Questo crea una versione più "leggera" di canvas, senza alcuna logica di gestione degli eventi. Abbiamo ancora l'intero modello a oggetti a disposizione per lavorare (aggiungere, modificare e rimuovere oggetti), e possiamo cambiare qualsiasi configurazione. Tutto questo funziona ancora, solo la gestione degli eventi è spenta.

Più avanti in questo articolo, parlando dell'opzione di generazione personalizzata, vedremo che se StaticCanvas è tutto ciò che serve, è possibile anche creare una versione più leggera di Fabric. Questa potrebbe essere una buona opzione se avete bisogno di qualcosa come grafici non interattivi o immagini non interattive con filtri, all'interno dell'applicazione.

Le immagini

Aggiungere di rettangoli e cerchi sul canvas è divertente, ma come potete immaginare, ormai, Fabric rende molto semplice anche lavorare con le immagini. Ecco come creare un'istanza dell'oggetto fabric.Image e come aggiungerlo al canvas, prima in HTML e poi in JavaScript:

HTML:

<canvas id="c"></canvas>
<img src="my_image.png" id="my-image">

JavaScript:

var canvas = new fabric.Canvas('c');
var imgElement = document.getElementById('my-img');
var imgInstance = new fabric.Image(imgElement, {
  left: 100,
  top: 100,
  angle: 30,
  opacity: 0.85
});
canvas.add(imgInstance);

Si noti che si passa un elemento immagine al costruttore fabric.Image. Questo crea un'istanza di fabric.Image che appare proprio come l'immagine del documento. Inoltre impostiamo immediatamente i valori left/top a 100/100, angle a 30 e opacity a 0.85. Quando l'immagine viene aggiunta al canvas, viene reso in posizione 100:100 a un angolo di 30 gradi ed è leggermente trasparente (vedi Figura 9). Non male!

Se l'immagine non si trova nel documento ma abbiamo solo un URL di un'immagine, è possibile utilizzare fabric.Image.fromURL:

fabric.Image.fromURL('my_image.png', function(oImg) {
  canvas.add(oImg);
});

Piuttosto semplice, no? Basta chiamare fabric.Image.fromURL, con un URL di un'immagine, e indiceare la funzione di callback da eseguire una volta caricata e creata l'immagine. La funzione di callback riceve l'oggetto fabric.Image già creato come primo argomento. A quel punto, è possibile aggiungere l'immagine al canvas o anche modificarla prima e aggiungerla poi:

fabric.Image.fromURL('my_image.png', function(oImg) {
  // riduce l'immagine e la riflette prima di aggiungerla al canvas
  oImg.scale(0.5).setFlipX(true);
  canvas.add(oImg);
});

Path e PathGroup

Abbiamo osservato forme semplici e immagini. Che ne dite se passiamo a forme e contenuti più complessi? Conosciamo Path e PathGroup, una coppia potente!

Path in Fabric rappresenta il contorno di una forma, che può essere riempito, avvolto da un bordo e modificato in altri modi. Un path viene costruito con una serie di comandi che imitano essenzialmente una penna che si muov e disegna da un punto ad un altro. Con l'aiuto di comandi come move, line, curve e arc, i path possono formare forme incredibilmente complesse. E grazie ai raggruppamenti di questi percorsi (PathGroup), le possibilità si espandono ancora.

I paths in Fabric somigliano parecchio agli elementi <path> di SVG. Usano lo stesso insieme di comandi, possono essere creati da elementi <path> e possono essere serializzati sotto forma di elementi. Descriveremo meglio la serializzazione e il parsing SVG in seguito, ma per ora val la pena dire che sarà raro creare istanze di Path a mano. Piuttosto si utilizza il parser SVG incorporato in Fabric. Ma per capire cosa siano gli oggetti Path creiamone uno semplice a mano (in Figura 10 il risultato):

var canvas = new fabric.Canvas('c');
var path = new fabric.Path('M 0 0 L 200 100 L 170 200 z');
path.set({ left: 120, top: 120 });
canvas.add(path);

Qui istanziamo l'oggetto fabric.Path e gli passiamo una serie di istruzioni di percorso. Potrebbe sembrare criptico, ma in realtà è facile da capire. M rappresenta il comando di movimento e dice alla penna invisibile di spostarsi al punto 0, 0. L sta per linea e fa disegnare all penna una linea fino al punto 200, 100. Poi, un altro L crea una linea fino a 170, 200. Infine, z impone alla penna di chiudere il percorso corrente e completare la forma.

Poiché fabric.Path è come qualsiasi altro oggetto in Fabric, è anche possibile modificare alcune delle sue proprietà, o modificare l'oggetto stesso, come illustrato di seguito e in Figura 11:

...
var path = new fabric.Path('M 0 0 L 300 100 L 200 300 z');
...
path.set({ fill: 'red', stroke: 'green', opacity: 0.5 });
canvas.add(path);

Per curiosità, diamo uno sguardo alla sintassi di un percorso un po' più complesso. Capirete perché la creazione di percorsi a mano, potrebbe non essere una grande idea:

...
var path = new fabric.Path('M121.32,0L44.58,0C36.67,0,29.5,3.22,24.31,8.41
c-5.19,5.19-8.41,12.37-8.41,20.28c0,15.82,12.87,28.69,28.69,28.69c0,0,4.4,
0,7.48,0C36.66,72.78,8.4,101.04,8.4,101.04C2.98,106.45,0,113.66,0,121.32
c0,7.66,2.98,14.87,8.4,20.29l0,0c5.42,5.42,12.62,8.4,20.28,8.4c7.66,0,14.87
-2.98,20.29-8.4c0,0,28.26-28.25,43.66-43.66c0,3.08,0,7.48,0,7.48c0,15.82,
12.87,28.69,28.69,28.69c7.66,0,14.87-2.99,20.29-8.4c5.42-5.42,8.4-12.62,8.4
-20.28l0-76.74c0-7.66-2.98-14.87-8.4-20.29C136.19,2.98,128.98,0,121.32,0z');
canvas.add(path.set({ left: 100, top: 200 }));

Qui, M è sempre il comando di spostamento, quindi la penna inizia il suo percorso di disegno dal punto 121.32,0. Poi c'è una L (linea), comando che porta la penna a 44.58, 0. Fin qui tutto bene. Ora arriva il comando C, che sta per "Cubic Bezier". Questo comando fa disegnare alla penna una curva di Bezier dal punto corrente a 36.67, 0. Esso utilizza 29.5, 3.22 come punto di controllo all'inizio della riga e 24.31, 8.41 come punto di controllo alla fine. L'intera operazione è poi seguita da una dozzina di altri comandi Cubic Bezier, che infine creano una graziosa forma di freccia, come mostrato in Figura 12.

Ci sono discrete probabilità che non vorrete lavorare direttamente con bestie del genere. Invece, è possibile utilizzare qualcosa come il fabric.loadSVGFromString o il metodo fabric.loadSVGFromURL per caricare un intero file SVG e lasciare che il parser SVG di Fabric faccia il suo lavoro di percorrere su tutti gli elementi SVG e la creazione di oggetti percorso corrispondente.

In questo contesto, mentre l'oggetto Path di Fabric rappresenta un elemento <path> di SVG, le collezioni di percorsi, spesso presenti nei documenti SVG, sono rappresentate istanze di PathGroup (fabric.PathGroup). PathGroup non è altro che un gruppo di oggetti Path, e poiché fabric.PathGroup eredita da fabric.Object, può essere aggiunto ad un canvas, proprio come qualsiasi altro oggetto e manipolato allo stesso modo.

Proprio come con i Path, probabilmente non lavorerete con un gruppo di percorsi direttamente. Ma se inciampate su uno di questi dopo il parsing di un SVG, saprete esattamente che cosa è e a cosa serve.

Conclusioni

Abbiamo solo scalfito la superficie di ciò che è possibile con il Fabric. Ora è possibile creare facilmente forme semplici, forme complesse o immagini, aggiungerle al canvas e modificarle in qualsiasi modo (posizione, dimensioni, angoli, colori, bordi, torasparenze).

Buon divertimento con gli esperimenti in Fabric!

Nel frattempo, potete guardare le demo e i benchmark, unirvi alle discussioni su Stack Overflow o andare dritti ai docs, il wiki e i sorgenti. Potete imparare di più su HTML5 Canvas sull'MSDN IE Developer Center, o leggere An Introduction to the HTML 5 Canvas Element di Rey Bango su Script Junkie.

L'autore

Juriy Zaytsev è un appassionato sviluppatore JavaScript che vive a New York. È stato membro del team che ha sviluppato il core di Prototype.js, blogga su perfectionkills.com, ed è il creatore della libreria Fabric.js canvas library. Attualmente Juriy lavora alla sua startup Printio.ru e a rendere Fabric sempre più divertente da utilizzare.