Почему мой холст не отображает ничего, используя Fabric.js?

Я скопировал код, который дает Fabricjs, и поместил его в файл под названием Fabric.js. Затем я создал файл Canvas.js. Я импортировал оба в свои HTML-файлы и пытаюсь распечатать прямоугольник, но ничего не работает. Что я делаю не так?Почему мой холст не отображает ничего, используя Fabric.js?

HTML:

<!doctype html> 
<html lang="en";> 
<head> 
    <meta charset="utf-8" /> 
    <title>CustomCase</title> 
    <link rel="stylesheet" href="HeaderFooter.css"> 
    <link rel="stylesheet" href="SkapaDesign.css"> 
    <script src="Fabric.js"></script> 
    <script src="Canvas.js"></script> 
</head> 
<body> 
    <div id="Wrapper"> 
     <header id="Header"></header> 

     <section id="Body"> 
      <div id="LeftColumn"> 
       <canvas id="Canvas"></canvas> 
      </div> 
     </section> 

     <footer id="Footer"></footer> 
    </div> 
</body> 
</html>

CSS:

#Body{ 
    height: 675px; 
} 
#LeftColumn{ 
    float: left; 
    width: 355px; 
    margin-top: 20px; 
} 
#Canvas{ 
    float: left; 
    margin-left: 15px; 
    overflow: hidden; 
}

JavaScript:

$(document).ready(function(){ 
    var canvas = new fabric.Canvas('Canvas'); 

var rect = new fabric.Rect({ 
    top: 100, 
    left: 100, 
    width: 60, 
    height: 70, 
    fill: 'red' 
}); 
canvas.add(rect); 
});

источник

2013-11-10 user2961869