Javascript-форум - Canvas - разобраться с перерисовкой

Взялся за Canvas HTML5
Вначале попробовал LibCanvas с непонятным скриптом (не зная что выбрал), потом (временно?!) перешел на KineticJS.

Но суть одна: не могу понять принцип перерисовки анимации. Всё время наталкиваюсь на полную перерисовку. А логикой ничего не пойму. Помогите пожалуйста! Мне нужно только одну анимашку сделать а занимаюсь "быдлокодингом".

В коде главный вопрос:
1. Как сделать анимацию перерисовкой экрана полностью. .
+ Как сделать анимацию частичной перерисовкой (не всех элементов) если возможно?

Другие вопросы:
2. как обратиться к фигуре "по имени" а не по экземпляру объекта. у меня name на каждой фигуре: 'kvadrat'+i.toString(10)
3.1. Что это за магическая функция с кодом типа: (function() { ... } )();
- там вт орой раз есть скобки (). Если это Объект, то не понимаю - помогите.
3.2. У меня фигуры иногда не клонируются а перерисовывается если не беру в "магическую функцию" или если много фигур после сего. Как сделать нормальные разделённые фигуры-объекты?

<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<meta charset="utf-8">
</head>
<body>

    <div id="container"></div>
    <div id="buttons">
      <button id="show">
        show
      </button>
      <button id="hide">
        hide
      </button>
    </div>

<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.5.5.min.js"></script>
<!-- script src="mod/canvas/KineticJS/kinetic-v4.5.5.min.js"></script -->
<script defer="defer">

var stage = new Kinetic.Stage({
	  container: 'container',
	  width: 578,
	  height: 200
	  // Далее какие-либо действия над холстом
	});
	var layer = new Kinetic.Layer();

	var pages_LRbalance = 0;

	var pageList = [];
	var buttonLR = [];
	var book_xx = 200.5;  // центральная точка для середины книги  -отсчет от центра(верх) сшивки листов
	var book_yy = 50.5;
	for (i = 9; i>=0; i--) { 
        (function() {
			var book_x = book_xx +(i*4);
			var book_y = book_yy +(i*4);
			var pageListFF = new Kinetic.Shape ({
			  drawFunc: function(canvas) {
				var context = canvas.getContext();
				context.beginPath();
				// рисуем фгуру сложную или простую (сейчас квадрат из линий)
				context.moveTo(book_x,book_y);
				context.lineTo(book_x,book_y +20); // правая сторона
				context.lineTo(book_x +20,book_y +20); // ближний край (переплёта) книги
				context.lineTo(book_x +20,book_y); // левая сторона
				context.lineTo(book_x,book_y); // дальний край (переплёта) книги

				// drawing
				context.closePath();
				canvas.fillStroke(this);
			  },
			  fill: '#AAE',
			  stroke: '#888',
			  strokeWidth: 2,
			  visible: true,
			  name: 'kvadrat'+i.toString(10)  // имена должны быть индивид. для каждого пересозданного объекта 'pageListFF'
			});

			pageList[0,i] = pageListFF; // ссылка(+сохранение) на объект, пока он существует таким
											//Тут вопрос !! как сохранять или использовать потом фигуру (иным способом)
			layer.add(pageListFF);
		})();

      (function() {
			// ...
			context.moveTo(book_x +50,book_y);  // не описывал в начале создания темы, но это 2я колонка
			//   - по вопросам заданным в теме, не суть важно, но визуальный эффект более явный,
			//    это 2-й столбик прямоугольников
			pageList[1,i] = pageListFF; // ссылка(+сохранение) на объект, пока он существует таким
											//Тут вопрос !! как сохранять или использовать потом фигуру (иным способом)
			layer.add(pageListFF);
		})();


	}

// ...

stage.add(layer);

	// add button event bindings
	document.getElementById('hide').addEventListener('click', function() {
	  pageList[0,0].hide();
	  layer.draw();
	}, false);

	document.getElementById('show').addEventListener('click', function() {
	  pageList[0,0].show();
	  layer.draw();
	}, false);

</script>

</body>
</html>

P.S. извините, так и не нашел подраздел форума специально для Canvas и SVG.