Q&A with Fabric.js Creator Juriy Zaytsev

Script Junkie just published the last in a four-part series on the Fabric.js JavaScript library for HTML5 canvas (part 1, part 2, part 3). Fabric.js provides a suite of tools and resources for canvas, abstracting the low level Canvas API that can otherwise make interacting with graphic elements quite difficult. The Fabric.js object model takes care of canvas state and rendering to let developers work directly with “objects.”

I spoke with Juriy Zaytsev, creator of Fabric.js and author of the feature series, about the library.

Michael Desmond: What motivated you to create the Fabric.js library? What problem did you see with the HTML5 canvas and how does Fabric.js address that?

Juriy Zaytsev: HTML5 canvas is very low-level, and any complex application could benefit tremendously from canvas abstraction. That's why I created Fabric.js, based on some early canvas experiments. Fabric provides a simple but powerful object model on top of native methods. It takes care of canvas state and rendering, and lets us work with “objects” directly.

Desmond: Was there an initial point of inspiration for the Fabric.js concept?

Zaytsev: There was an article on Ajaxian four years ago. It was about photo collages with canvas, and I was amazed at how responsive and natural the demo felt. Until then, such interactivity was only possible with Flash. That's when I started experimenting with Fabric, basing my experiments on the Ajaxian demo.

Desmond: Tell us about key challenges or issues you had to manage in creating your project. Did any surprises crop up?

Zaytsev: From the start, I tried to keep a few things in mind when developing a library -- performance, cross-browser support, and extensibility. Performance meant a lot of testing and sticking to low-level and efficient abstractions under the hood. Cross-browser compatibility felt natural to me, as an ex-Prototype.js core developer, but there were certainly a few bumps along the way. An extensive unit test suite helped a lot to ensure everything is stable.

Desmond: Any advice for readers looking to work with Fabric.js?

Zaytsev: Aside from going through the introductory series on Script Junkie, there's quite extensive API documentation. There's also a wiki on github, and a constantly growing list of demos with corresponding code. You can always find interesting tidbits on Fabric on our Twitter feed @fabricjs, and get quick help on Google groups. The API itself is self-explanatory and could be explored quickly from within a console.

Desmond: What value have you personally gotten out of writing this feature?

Zaytsev: Writing an article like this makes me evaluate some of the Fabric features and get a perspective on how easy it is to use the library. Is it easy to get started with? Are there any confusing parts? What can we improve? Those are the questions I asked myself. In fact, there have been some changes to the API and bug fixes as a result of writing this series!

Desmond: Thanks, Juriy. Anything you’d like to add for our readers?

Zaytsev: I would like to get more feedback from people reading this series. Did you think it was cool? Can you think of a better way to achieve something? Was anything confusing or unclear? Is there anything you'd like to hear more about? (Ed. note: Feel free to add comment here in the blog or email me at mmeditor@microsoft.com).