Edit in JSFiddle

<div>
    SETUP<br/>
    <canvas id='setup' width='300' height='300'></canvas>
</div>
<div>
    LOCK SCREEN<br/>
    <canvas id='lock' width='300' height='300'></canvas>
</div>
<br/><br/>
<span id='output'></span><br/>
<button id='clear'>Clear</button><br/><br/>
<span id='success' style='display: none'>Unlock</span>

var setup = new fabric.Canvas('setup', { selection: false });
var lock = new fabric.Canvas('lock', { selection: false });
var output = document.getElementById('output');
var moving = false;
var center = { top: 125, left: 125 };
var pattern = [];
var patternpos = 0;

setup.hoverCursor = 'pointer';
lock.hoverCursor = 'pointer';
// create a rectangle object
var vertical = new fabric.Rect({
    left: 145,
    top: 40,
    fill: 'black',
    width: 10,
    height: 220,
    selectable: false
});

var horizontal = new fabric.Rect({
    left: 40,
    top: 145,
    fill: 'black',
    width: 220,
    height: 10,
    selectable: false
});
//horizontal.set('selectable', false);

var up = new fabric.Triangle({
    left: 140,
    top: 20,
  	width: 20,
    height: 30,
    fill: 'purple',
    tag: 'NORTH',
    selectable: false
});

var down = new fabric.Triangle({
    left: 160,
    top: 280,
  	width: 20,
    height: 30,
    fill: 'purple',
    angle: 180,
    tag: 'SOUTH',
    selectable: false
});

var left = new fabric.Triangle({
	left: 20,
    top: 160,
    width: 20,
    height: 30,
    fill: 'purple',
    angle: 270,
    tag: 'WEST',
    selectable: false
});

var right = new fabric.Triangle({
	left: 280,
    top: 140,
    width: 20,
    height: 30,
    fill: 'purple',
    angle: 90,
    tag: 'EAST',
    selectable: false
});

var red = new fabric.Rect({
	left: 20,
    top: 20,
    width: 50,
    height: 50,
    fill: 'red',
    tag: 'RED',
    selectable: false
});

var green = new fabric.Rect({
	left: 230,
    top: 20,
    width: 50,
    height: 50,
    fill: 'green',
    tag: 'GREEN',
    selectable: false
});

var blue = new fabric.Rect({
	left: 20,
    top: 230,
    width: 50,
    height: 50,
    fill: 'blue',
    tag: 'BLUE',
    selectable: false
});

var yellow = new fabric.Rect({
	left: 230,
    top: 230,
    width: 50,
    height: 50,
    fill: 'yellow',
    tag: 'YELLOW',
    selectable: false
});

// "add" rectangle onto canvas
setup.add(vertical);
setup.add(horizontal);
setup.add(up);
setup.add(down);
setup.add(left);
setup.add(right);
setup.add(red);
setup.add(green);
setup.add(blue);
setup.add(yellow);

setup.on('mouse:down', function(options) {
  if (options.target && options.target.tag) {
      pattern.push(options.target.tag);
      Update();
  }
});

document.getElementById('clear').onclick = function() {
	pattern = [];
    patternpos = 0;
    Update();
};

function Update() {
    var unlock = (patternpos == pattern.length && pattern.length != 0) ? 'Unlock Success!' : '';
	output.innerHTML = pattern.join(", ") + " : " + patternpos + "/" + pattern.length + " " + unlock;
}





var lred = new fabric.Rect({
	left: center.left,
    top: center.top,
    width: 50,
    height: 50,
    fill: 'red',
    selectable: false,
    tag: 'RED',
    pos: 'NORTH',
    selectable: false
});

var lgreen = new fabric.Rect({
	left: center.left,
    top: center.top,
    width: 50,
    height: 50,
    fill: 'green',
    selectable: false,
    tag: 'GREEN',
    pos: 'EAST',
    selectable: false
});

var lblue = new fabric.Rect({
	left: center.left,
    top: center.top,
    width: 50,
    height: 50,
    fill: 'blue',
    selectable: false,
    tag: 'BLUE',
    pos: 'WEST',
    selectable: false
});

var lyellow = new fabric.Rect({
	left: center.left,
    top: center.top,
    width: 50,
    height: 50,
    fill: 'yellow',
    selectable: false,
    tag: 'YELLOW',
    pos: 'SOUTH',
    selectable: false
});

// "add" rectangle onto canvas
lock.add(vertical);
lock.add(horizontal);
lock.add(lred);
lock.add(lgreen);
lock.add(lblue);
lock.add(lyellow);

Scramble();

function Scramble() {
	var colors = [lred, lgreen, lyellow, lblue];
    var rand = [];
    while (colors.length > 0) {
    	var index = parseInt(Math.random() * colors.length);
        rand.push(colors[index]);
        colors.splice(index, 1);
    }
    moving = true;
    MoveToUp(rand[0]);
    MoveToLeft(rand[1]);
    MoveToRight(rand[2]);
    MoveToDown(rand[3]);
}

function CheckAgainstPattern(obj) {
    if (pattern.length == 0) return;
	if (obj.tag == pattern[patternpos] || obj.pos == pattern[patternpos]) {
    	patternpos++;
    } else {
        patternpos = 0;
    	if (obj.tag == pattern[0] || obj.pos == pattern[0]) {
        	patternpos = 1;
        }
    }
}

lock.on('mouse:down', function(options) {
  if (options.target && !moving && options.target.tag) {
      CheckAgainstPattern(options.target);
      Update();
      Scramble();
  }
});

function animateOptions(color, tag) {
    return {
        duration: 300,
        onChange: lock.renderAll.bind(lock),
        onComplete: function() {
            moving = false;
            color.pos = tag;
      	},
        easing: fabric.util.ease['easeInOutQuad']
    };
};

function MoveToLeft(color) {
	color.animate('left', 20, animateOptions(color, 'WEST'));
  color.animate('top', 125, animateOptions(color, 'WEST'));
}

function MoveToUp(color) {
	color.animate('left', 125, animateOptions(color, 'NORTH'));
  color.animate('top', 20, animateOptions(color, 'NORTH'));
}

function MoveToRight(color) {
	color.animate('left', 230, animateOptions(color, 'EAST'));
  color.animate('top', 125, animateOptions(color, 'EAST'));
}

function MoveToDown(color) {
	color.animate('left', 125, animateOptions(color, 'SOUTH'));
  color.animate('top', 230, animateOptions(color, 'SOUTH'));
}

Update();

canvas {
    width: 300px;
    height: 300px;
    border: 1px solid black;
}

div {
    display: inline-block;
}

body {
    overflow: hidden;
}