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

Question

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

0

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

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);
});

user2961869 10 нояб. 2013, в 22:11

Источник

Теги:

javascript

html

css

canvas

fabricjs