fabric js canvas init error

Question

I created my first js app with canvas and it doesn't work. Code was coppied from http://fabricjs.com/ and just wrapped in jQuery.

fab.js

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

    var rect = new fabric.Rect({
      left: 100,
      top: 100,
      fill: 'red',
      width: 20,
      height: 20,
      angle: 45
    });

    canvas.add(rect);
});

html

<html>
    <head>
        <title>Fabric.js</title>
        <script src="jquery-1.11.3.min.js"></script>
        <script src="jquery-ui.min.js"></script>
        <script src="canvasjs.min.js"></script>
        <script src="fabric.min.js"></script>
        <script src="fab.js"></script>
    </head>
    <body>
        <div id="c">

        </div>
    </body>
</html>

Uncaught Error: Could not initialize canvas element

What is going wrong?

Dmitry · Accepted Answer · 2015-12-02 20:38:21Z

2

I came to the resolution: just replace div attribute with canvas!

<html>
    <head>
        <title>Fabric.js</title>
        <script src="jquery-1.11.3.min.js"></script>
        <script src="jquery-ui.min.js"></script>
        <script src="canvasjs.min.js"></script>
        <script src="fabric.min.js"></script>
        <script src="fab.js"></script>
    </head>
    <body>
        <canvas id="c">

        </canvas>
    </body>
</html>

And it's working now.

answered Dec 2, 2015 at 20:38

Dmitry

4776 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

fabric js canvas init error

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related