CODEWITHSUNDEEP
javascriptcanvasfabricjs
user2603529
user2603529

Reputation: 11

How to start with fabric.js

I am a beginner to study JS. Now I encounter an issue to start with fabric.js which needs your help.

<!DOCTYPE HTML>
<html>
<head>
    <title>fabric_test</title>
    <script type="text/javascript" src="all.js"></script>
</head>
<body>
    <canvas id="canvas" width="512" height="512" style="background-color: rgb(222, 222, 222)">
        Your browser does not support canvas tag!
    </canvas>
    <script type="text/javascript">
        var canvas = new fabric.Canvas('canvas');
        // create a rectangle object
        var rect = new fabric.Rect({
          left: 100,
          top: 100,
          fill: 'red',
          width: 20,
          height: 20
        });

        // "add" rectangle onto canvas
        canvas.add(rect);

    </script>
</body>
</html>

My question is:

  1. Why the rectangle doesn't draw on canvas when i open the saved html file?
  2. The fabric I download is a folder which contains several folders and files. I just copy the all.js file on current location. Is this right?

Upvotes: 1

Views: 2374

Answers (2)

eveevans
eveevans

Reputation: 4460

This problem is caused because you put a background in your canvas object. So, the color is over the inside elements. Remove the background style from your canvas.

Upvotes: 1

melwyn pawar
melwyn pawar

Reputation: 1816

When you download the fabric zip file, on extraction you should find a folder fabric.js-1.4.4/dist copy the fabric.js file from there or the fabric.min.js file and include it instead of the all.js let me know if this works

Upvotes: 0

Related Questions