index.html

---
layout: default
title: Tutorial
---
<h2>General Support</h2>
<ul>
  <li>
    <a href="/fabric-gotchas">Fabric Gotchas</a> - Answers to the most common problems when working with Fabric.js
  </li>
</ul>
<h2>Upgrade Resources</h2>
<ul>
  <li>
    <a href="/upgrade-guide">Upgrade Guide</a> - A summary of major changes across each major Fabric.js release
  </li>
  <li>
    <a href="/v5-breaking-changes">v5.0 Breaking Changes</a> - A guide on the breaking changes within Fabric.js v.5x
  </li>
  <li>
    <a href="/v4-breaking-changes">v4.0 Breaking Changes</a> - A guide on the breaking changes within Fabric.js v.4x
  </li>
  <li>
    <a href="/changelog">Changelog v2.x and up</a> - Fabric.js current release highlights
  </li>
  <li>
    <a href="/changes-introduction">Fabric.js 2.0 Changes</a> - A basic summary of changes in Fabric.js version 2.0
  </li>
  <li>
    <a href="/v2-breaking-changes">v2.0 Breaking Change Guide Part 1</a> - Part 1 of v2.0 breaking changes, including example code for handling JSON from prior Fabric.js versions
  </li>
  <li>
    <a href="/v2-breaking-changes-2">v2.0 Breaking Change Guide Part 2</a> - Part 2 of v2.0 breaking changes
  </li>
  <li>
    <a href="/fabric-changelog-old">Changelog v1.x</a> - Release highlights for previous versions of Fabric.js (up to v1.7.23)
  </li>
</ul>
<h2>Introduction to FabricJS</h2><span>A basic guide to help you get started using Fabric.js</span>
<ul id="articles">
  <li>
    <a href="/controls-api">Introduction to custom controls for Fabric 4.x</a>
  </li>
  <li>
    <a href="/fabric-object-caching">Introduction to Fabric object cache</a>
  </li>
  <li>
    <a href="/fabric-intro-part-1">Introduction to Fabric.js: Part 1</a>
    <span class="note">(<a href="https://github.com/rodrigopandini/articles-fabric.js/blob/master/Part-1.md">in Portuguese (not updated)</a>, <a href="/fabric-intro-part-1_ru">in Russian (not updated)</a>)</span>
    <ul>
      <li><a href="/fabric-intro-part-1#why_fabric">Why Fabric</a></li>
      <li><a href="/fabric-intro-part-1#objects">Objects</a></li>
      <li><a href="/fabric-intro-part-1#canvas">Canvas</a></li>
      <li><a href="/fabric-intro-part-1#images">Images</a></li>
      <li><a href="/fabric-intro-part-1#path_and_pathgroup">Path and PathGroup</a></li>
    </ul>
  </li>
  <li>
    <a href="/fabric-intro-part-2">Introduction to Fabric.js: Part 2</a>
    <span class="note">(<a href="https://github.com/rodrigopandini/articles-fabric.js/blob/master/Part-2.md">in Portuguese (not updated)</a>, <a href="/fabric-intro-part-2_ru">in Russian (not updated)</a>)</span>
    <ul>
      <li><a href="/fabric-intro-part-2#animation">Animation</a></li>
      <li><a href="/fabric-intro-part-2#image_filters">Image filters</a></li>
      <li><a href="/fabric-intro-part-2#colors">Colors</a></li>
      <li><a href="/fabric-intro-part-2#gradients">Gradients</a></li>
      <li><a href="/fabric-intro-part-2#text">Text</a></li>
      <li><a href="/fabric-intro-part-2#events">Events</a></li>
    </ul>
  </li>
  <li>
    <a href="/fabric-intro-part-3">Introduction to Fabric.js: Part 3</a>
    <span class="note">(<a href="https://github.com/rodrigopandini/articles-fabric.js/blob/master/Part-3.md">in Portuguese</a>, <a href="http://habrahabr.ru/post/254763/">In Russian</a>)</span>
    <ul>
      <li><a href="/fabric-intro-part-3#groups">Groups</a></li>
      <li><a href="/fabric-intro-part-3#serialization">Serialization</a></li>
      <li><a href="/fabric-intro-part-3#deserialization">Deserialization, SVG Parser</a></li>
      <li><a href="/fabric-intro-part-3#subclassing">Subclassing</a></li>
    </ul>
  </li>
  <li>
    <a href="/fabric-intro-part-4">Introduction to Fabric.js: Part 4</a>
    <span class="note">(<a href="https://github.com/rodrigopandini/articles-fabric.js/blob/master/Part-4.md">in Portuguese</a>, <a href="http://habrahabr.ru/post/257401/">In Russian</a>)</span>
    <ul>
      <li><a href="/fabric-intro-part-4#free_drawing">Free drawing</a></li>
      <li><a href="/fabric-intro-part-4#customization">Customization</a></li>
      <li><a href="/fabric-intro-part-4#node">Fabric on Node.js</a></li>
    </ul>
  </li>
  <li>
    <a href="/fabric-intro-part-5">Introduction to Fabric.js: Part 5</a>
    <ul>
      <li><a href="/fabric-intro-part-5#pan_zoom">Pan and zoom the canvas</a></li>
    </ul>
  </li>
  <li>
    <a href="/using-transformations">Introduction to Fabric.js: Transformations</a>
    <ul>
      <li><a href="/using-transformations">Using transformations</a></li>
    </ul>
  </li>
  <li>
    <a href="/subclassing-tutorial">Introduction to Fabric.js: Part 7 - Subclasses</a>
    <ul>
      <li><a href="/subclassing-tutorial">Subclassing Textbox for use bitmap fonts</a></li>
    </ul>
  </li>
  <li>
    <a href="/clippath-part1">Introduction to Fabric.js: Part 8 - Clipping with clipPaths</a>
    <ul>
      <li><a href="/clippath-part1">ClipPaths basics</a></li>
      <li><a href="/clippath-part2">ClipPaths nesting and more complex scenario</a></li>
      <li><a href="/clippath-part3">ClipPaths on canvas</a></li>
      <li><a href="/clippath-part4">ClipPaths and absolute position</a></li>
    </ul>
  </li>
</ul>