Browse files

Add links to chapters in tutorial section

  • Loading branch information...
1 parent 73f34e2 commit 5f14ced571046afe22bcb60830e0e47a3e2c534e @kangax committed Feb 3, 2013
2 _includes/header.html
@@ -2,7 +2,7 @@
<li><a href="">Features</a></li>
<li><a href="">Demos</a></li>
<li><a href="">Docs</a></li>
- <li><a href="">Articles</a></li>
+ <li><a href="">Tutorial</a></li>
<li><a href="">Tests</a></li>
<li><a href="">Benchmarks</a></li>
<li class="secondary"><a href="!/kangax/fabric.js"><img src=""></a></li>
28 articles/index.html
@@ -1,23 +1,49 @@
layout: default
-title: Articles
+title: Tutorial
<ul id="articles">
<a href="/fabric-intro-part-1">Introduction to Fabric.js: Part 1</a>
<span class="note">(<a href="">in Portuguese</a>, <a href="/fabric-intro-part-1_ru">in Russian</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>
<a href="/fabric-intro-part-2">Introduction to Fabric.js: Part 2</a>
<span class="note">(<a href="">in Portuguese</a>, <a href="/fabric-intro-part-2_ru">in Russian</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>
<a href="/fabric-intro-part-3">Introduction to Fabric.js: Part 3</a>
<span class="note">(<a href="">in Portuguese</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>
<a href="/fabric-intro-part-4">Introduction to Fabric.js: Part 4</a>
<span class="note">(<a href="">in Portuguese</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>
16 css/master.css
@@ -25,12 +25,13 @@ h3, h4 { margin-top: 1.5em !important; }
#header li.secondary { float: right; }
#header li.flattr { margin-top: 9px; margin-left: 5px }
-#demos, #featured-demos { padding-left: 0; }
-#demos li, #featured-demos li { list-style: none; text-align: center; width: 200px; display: inline-block; margin-right: 20px; margin-bottom: 25px !important; vertical-align: top; }
-#demos li img, #featured-demos li img { box-shadow: rgba(0,0,0,0.2) 0 0 10px; margin-bottom: 5px; width: 150px; display: inline-block; }
-#demos li .caption, #featured-demos li .caption { display: inline-block; }
-#demos li a, #featured-demos li a { display: block; text-decoration: none; font-size: 16px; }
-#demos li a:hover img, #featured-demos li a:hover img { box-shadow: rgba(0,0,255,0.2) 0 0 10px; }
+#demos { padding-left: 0; margin-top: 30px; }
+#demos li { list-style: none; text-align: center; width: 200px; display: inline-block; margin-right: 20px; margin-bottom: 25px !important; vertical-align: top; }
+#demos li img { box-shadow: rgba(0,0,0,0.2) 0 0 10px; margin-bottom: 5px; width: 150px; display: inline-block; }
+#demos li .caption { display: inline-block; }
+#demos li a { display: block; text-decoration: none; font-size: 16px; }
+#demos li a:hover img { box-shadow: rgba(0,0,255,0.2) 0 0 10px; }
+#demos li a:hover .caption { font-weight: bold; }
.github iframe { margin-top: 8px; }
.twitter iframe { margin-top: 8px; margin-right: -14px; margin-left: 10px; }
@@ -39,6 +40,9 @@ h3, h4 { margin-top: 1.5em !important; }
#bd-wrapper { padding: 10px; }
#bd-wrapper > ul > li { margin-bottom: 5px }
+#articles li ul { margin-top: 5px; margin-bottom: 15px; padding-left: 15px; list-style-type: disc }
+#articles li ul li { margin-bottom: 5px; }
pre { margin-top: 0; font-size: 12px; vertical-align: top; background: #F4F2E5; display: inline-block; padding: 15px; margin-left: 15px; word-wrap: break-word; white-space: pre; }
.canvas-container { border: 1px dotted #ccc; display: inline-block; vertical-align: top; -webkit-tap-highlight-color: rgba(0,0,0,0); }
13 demos/index.html
@@ -3,20 +3,7 @@
title: Demos
<ul id="demos">
-{% for post in site.categories.featured %}
- <li>
- <a href="../{{ post.url }}">
- <img src="/site_assets/{{ post.url }}.png">
- <span class="caption">{{ post.title }}</span>
- </a>
- </li>
-{% endfor %}
-<ul id="featured-demos">
{% for post in site.categories.demos %}
<a href="../{{ post.url }}">
6 posts/_posts/2012-12-21-fabric-intro-part-4.html
@@ -10,7 +10,7 @@ <h2 id="introduction_to_fabricjs">Introduction to Fabric.js. Part 4.</h2>
<p>We've covered so many topics in the previous series; from basic object manipulations to animations, events, filters, groups, and subclasses. But there's still couple of very interesting and useful things to discuss!</p>
- <h3>Free drawing</h3>
+ <h3 id="free_drawing">Free drawing</h3>
<p>If there's anything <code>&lt;canvas></code> really shines at, it's that it has an excellent support for free drawing! Since canvas is simply a 2D bitmap — a paper to paint on — performing free drawing is very natural. And of course Fabric takes care of this for us.</p>
@@ -26,7 +26,7 @@ <h2 id="introduction_to_fabricjs">Introduction to Fabric.js. Part 4.</h2>
<p>In the near future, we are planning to add more options for free drawing — various versions of a brush (e.g. spray-like or chalk-like). Also custom brush patterns, and an option to extend with your own, similar to Fabric image filters.</p>
- <h3>Customization</h3>
+ <h3 id="customization">Customization</h3>
<p>One of the amazing things about Fabric is how customizable it is. You can tweak dozens of various parameters on canvas or canvas objects, in order to make things behave exactly the way you want. Let's take a look at some of them.</p>
@@ -161,7 +161,7 @@ <h2 id="introduction_to_fabricjs">Introduction to Fabric.js. Part 4.</h2>
<p><img src="/article_assets/4_7.png" style="border:1px solid #eee"></p>
- <h3>Fabric on Node.js</h3>
+ <h3 id="node">Fabric on Node.js</h3>
<p>One of the unique aspects of Fabric, is that it can work not just on a client, in a browser, but also on a server! This could be useful when you want to send data from a client and create an image of that data right on a server. Or if you simply want to use Fabric API from a console — for speed, convenience, or other reasons.</p>
12 posts/_posts/2012-7-25-fabric-intro-part-2.html
@@ -12,7 +12,7 @@ <h2 id="introduction_to_fabricjs">Introduction to Fabric.js. Part 2.</h2>
<p>Now that most of the basics are out of the way, let's get down to some fun stuff!</p>
- <h3>Animation</h3>
+ <h3 id="animation">Animation</h3>
<p>No respectable canvas library goes without animation facility. And Fabric is not an exception. Since there's such a powerful object model and graphical capabilities, it would be a shame not to have animation helpers built in.</p>
@@ -75,7 +75,7 @@ <h2 id="introduction_to_fabricjs">Introduction to Fabric.js. Part 2.</h2>
<p>So this covers animation part of Fabric. Just to give you some ideas of what becomes possible &mdash; you can animate object's angle to make it rotate; animate left/top properties to make it move; animate width/height to make it shrink/grow; animate opacity to make it fade in/out; and so on.</p>
-<h3>Image filters</h3>
+<h3 id="image_filters">Image filters</h3>
<p>In the first part of this series, we learned how to work with images in Fabric. There's <code>fabric.Image</code> constructor, that accepts image element. There's also <code>fabric.Image.fromURL</code> method, which can create image instance ouf of a URL string. And any of these images can be thrown and rendered on canvas just like any other object.</p>
@@ -164,7 +164,7 @@ <h2 id="introduction_to_fabricjs">Introduction to Fabric.js. Part 2.</h2>
<p>Without delving too much into this code, the main action is hapenning in a loop, where we replace green (data[i+1]) and blue (data[i+2]) components of each pixel with 0, essentialy removing them. Red component of standard rgb triple stays untouched, essentially making entire image painted red. As you can see, <code>applyTo</code> method is being passed main canvas element representing entire image. From there, we can iterate over its pixels (<code>getImageData().data</code>) modifying them in any way we want.</p>
+<h3 id="colors">Colors</h3>
<p>Whether you're more comfortable working with hex, RGB, or RGBA colors, Fabric provides a solid color foundation to help you express yourself most naturally. Here are some of the ways in which you can define a color in Fabric:</p>
@@ -194,7 +194,7 @@ <h2 id="introduction_to_fabricjs">Introduction to Fabric.js. Part 2.</h2>
redish.toGrayscale().toHex(); // "A1A1A1"
+<h3 id="gradients">Gradients</h3>
<p>An even more expressive way to work with colors is via gradients. Gradients allow us to blend one color into another, creating some stunning graphical effects.</p>
@@ -265,7 +265,7 @@ <h2 id="introduction_to_fabricjs">Introduction to Fabric.js. Part 2.</h2>
<p>Which cool versions can you come up with?</p>
+<h3 id="text">Text</h3>
<p>What if you wanted to display not only images and vector shapes on canvas, but also text? Fabric has you covered! Meet <code>fabric.Text</code> objects.</p>
@@ -447,7 +447,7 @@ <h2 id="introduction_to_fabricjs">Introduction to Fabric.js. Part 2.</h2>
<p><img src="/article_assets/2_14.png" style="border:1px solid #eee"></p>
+<h3 id="events">Events</h3>
<p>The event-driven architecture is the basis for some amazing power and flexibility within a framework. Fabric is no exception, and provides an extensive event system, starting from low-level "mouse" events to high-level objects ones.</p>
8 posts/_posts/2012-8-12-fabric-intro-part-3.html
@@ -11,7 +11,7 @@
<p>We've covered most of the basics in <a href="/fabric-intro-part-1">first</a> and <a href="/fabric-intro-part-2">second</a> parts of this series. Let's move on to the more advanced stuf!</p>
+<h3 id="groups">Groups</h3>
<p><img src="/article_assets/8.png" style="border:1px solid #eee"></p>
@@ -172,7 +172,7 @@
+<h3 id="serialization">Serialization</h3>
<p>As soon as you start building a stateful application of some sort, perhaps allowing users to save results of canvas contents on a server, or streaming contents to a different client, you'll need <b>canvas serialization</b>. How else are you to send canvas contents? Of course, there's always an option to export canvas to an image, but uploading an image to a server is certainly quite bandwidth-heavy. Nothing beats text when it comes to size, and that's exactly why Fabric provides an excellent support for canvas serialization/deserialization.</p>
@@ -348,7 +348,7 @@
<p>The benefit of SVG representation comparing to Fabric's proprietary <code>toObject</code>/<code>toJSON</code> is that you can throw it into any SVG-capable renderer (browser, application, printer, camera, etc.) and it should just work. With <code>toObject</code>/<code>toJSON</code>, however, you would first need to load it onto canvas. Speaking of loading things on canvas, now that we can serialize canvas into an efficient chunk of text, how would we go about loading back onto canvas?</p>
-<h3>Deserialization, SVG parser</h3>
+<h3 id="deserialization">Deserialization, SVG parser</h3>
<p>Similarly to serialization, there's two ways to load canvas from a string: from JSON representation, or from SVG one. When using JSON representation, there's <code>fabric.Canvas#loadFromJSON</code> and <code>fabric.Canvas#loadFromDatalessJSON</code> methods. When using SVG, there's <code>fabric.loadSVGFromURL</code> and <code>fabric.loadSVGFromString</code> ones.</p>
@@ -414,7 +414,7 @@
<p><code>fabric.loadSVGFromURL</code> works the same way, except that you pass string containing URL rather than SVG contents. Note that Fabric will attempt to fetch that URL via XMLHttpRequest, so the SVG needs to conform to the usual SOP rules.</p>
+<h3 id="subclassing">Subclassing</h3>
<p>Since Fabric is built in a truly object-oriented fashion, it's designed to make subclassing and extension simple and natural. As you know from 1st part of this series, there's an existing hierarchy of objects in Fabric. All 2D objects (paths, images, text, etc.) inherit from <code>fabric.Object</code>, and some "classes" — like <code>fabric.PathGroup</code> — even form 3-level inheritance.</p>
0 ...ured/_posts/2011-10-26-image-filters.html → ...emos/_posts/2011-10-26-image-filters.html
File renamed without changes.
0 posts/featured/_posts/2011-9-1-cross.html → posts/demos/_posts/2011-9-1-cross.html
File renamed without changes.
0 ...atured/_posts/2011-9-1-customization.html → .../demos/_posts/2011-9-1-customization.html
File renamed without changes.
0 posts/featured/_posts/2011-9-1-events.html → posts/demos/_posts/2011-9-1-events.html
File renamed without changes.
13 ...featured/_posts/2011-9-1-kitchensink.html → posts/demos/_posts/2011-9-1-kitchensink.html
@@ -276,14 +276,23 @@
<select id="drawing-mode-selector">
- <option>Circles</option>
+ <option>Circle</option>
+ <option>Spray</option>
+ <option>Pen</option>
+ <option>Pattern</option>
+ <option>hline</option>
+ <option>vline</option>
+ <option>square</option>
+ <option>diamond</option>
+ <option>texture</option>
Line width:
<input type="range" value="30" min="0" max="150" id="drawing-line-width"><br>
Line color:
<input type="color" value="#005E7A" id="drawing-color"><br>
Line shadow width:
- <input type="range" value="5" min="0" max="50" id="drawing-shadow-width"><br>
+ <input type="range" value="0" min="0" max="50" id="drawing-shadow-width"><br>
0 posts/featured/_posts/2011-9-1-ladybug.html → posts/demos/_posts/2011-9-1-ladybug.html
File renamed without changes.
0 ...d/_posts/2011-9-1-opacity_mouse_move.html → ...s/_posts/2011-9-1-opacity_mouse_move.html
File renamed without changes.
0 posts/featured/_posts/2011-9-1-stickman.html → posts/demos/_posts/2011-9-1-stickman.html
File renamed without changes.
0 ...s/featured/_posts/2011-9-28-controls.html → posts/demos/_posts/2011-9-28-controls.html
File renamed without changes.
0 ...posts/2012-10-11-per-pixel-drag-drop.html → ...posts/2012-10-11-per-pixel-drag-drop.html
File renamed without changes.
0 ...featured/_posts/2012-12-30-particles.html → posts/demos/_posts/2012-12-30-particles.html
File renamed without changes.

0 comments on commit 5f14ced

Please sign in to comment.