Q:

Django template tags + using fabric.js

I've set up a reasonable Django site to test and play around with, but I'm having an awful time including fabric.js
Ultimately I want to use fabric.js to take small images from a database and display them on a canvas, but I digress.
The issue I'm having is that I cannot use a local png image within my html using fabric.js - I mean, fabric is included (because I can do very basic tricks with fabric, like create rectangles) However, the tutorial isn't clear on including local images.
Here's my awful code:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
        <title>This is using render</title>
    {% load staticfiles %}
    <script scr="{% static "js/fabric.js" %}" type="text/javascript"></script>
</head>

<body>

<script type="text/javascript">
var canvas = new fabric.Canvas('c');
canvas.setHeight(480);
canvas.setWidth(640);
var imgElement = fabric.Image.fromURL('../static/images/pitch.png', function(oImg) {
  canvas.add(oImg);
});

var imgInstance = new fabric.Image(imgElement, {
  left: 100,
  top: 100,
  angle: 90,
  opacity: 0.85
});
canvas.add(imgInstance);

</script>

</body>
</html>

Probably doing something noobish, so apologies in advance.

A:

Add an image element in your HTML (and get it by id) instead of loading it using fabric.Image.fromURL()
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>This is using render</title> {% load staticfiles %}
    <script src="{% static "js/fabric.js" %}" type="text/javascript"></script>
</head>

<body>
    <canvas id="c"></canvas>
    <img id="imgElement" src="../static/images/pitch.png" hidden>

    <script type="text/javascript">
        var canvas = new fabric.Canvas('c');
        canvas.setHeight(480);
        canvas.setWidth(640);

        var imgInstance = new fabric.Image(imgElement, {
            left: 100,
            top: 100,
            angle: 90,
            opacity: 0.85
        });
        canvas.add(imgInstance);
    </script>
</body>

</html>

