初めに

ダウンロードやクリア(書いた内容)機能の実装等を含め、すこし迷ったので、そのあたりを含めたサンプルメモ(3.6.3で確認)

ライブラリのjsファイルについては、以下のページのダウンロードリンクから取得
fabric.jsのメインページ

フォルダ構成

root/
 ├ index.html
 ├ canvas.jpg(表示する画像)
 └ assets/
    ├ main.js
    └ fabric.min.js

ソース

HTML

index.html

<!DOCTYPE html>
<html>
<head>
    <script src="./assets/js/fabric.min.js"></script>
    <script src="./assets/js/main.js"></script>
</head>
<body>
    <canvas id="canvas"></canvas>
    <a id="download" href="#">ダウンロード</a>
    <a id="init" href="javascript:void(0)">クリア</a>
</body>
</html>

JavaScript

main.js

// キャンバスの共通オブジェクト
var canvas = null;
// 読み込むファイル名（動的に変えてもＯＫ）
var FILENAME = "canvas.jpg";

window.addEventListener("load", function(){

    // キャンバスの初期設定
    const canvasinit = function(){

        // キャンバス取得
        var canvas = new fabric.Canvas('canvas');
        
        // 手書きモードOK
        canvas.isDrawingMode = true;
        // 手書きの色
        canvas.freeDrawingBrush.color = "#990000";
        // 手書きの太さ
        canvas.freeDrawingBrush.width = 10;

        // 画像読み込み
        var img = new Image();
        img.src=FILENAME;

        // 画像読み込んだときの処理
        img.onload = function(){
            
            // キャンバスサイズを設定()
            canvas.setWidth(this.width);
            canvas.setHeight(this.height);

            // サイズを指定画像に合わせるために読み込み終わったときに、キャンバスに設定する
            canvas.setBackgroundImage(FILENAME, canvas.renderAll.bind(canvas),
                {
                    // キャンバス内の画像サイズを設定
                    scaleX: canvas.width / img.width,
                    scaleY: canvas.height / img.height
                }
            );

        }

        // 描いた内容はクリア、画像はそのまま
        var init = document.getElementById("init");
        init.addEventListener("click", function(){
            // キャンバスクリア
            canvas.clear();
            // 画像を表示(上記onload処理にいく)
            img.src=FILENAME;
        });

    }
    // 初期処理で実行
    canvasinit();

    // ダウンロード処理
    var download = document.getElementById("download");
    download.addEventListener("click", function(){
        
        // ダウンロードファイル名指定
        this.setAttribute("download", "sample.jpg");
        // キャンバスのオブジェクト取得
        canvas = document.getElementById('canvas');
        // base64に変換
        var base64 = canvas.toDataURL("image/jpeg");
        // ダウンロード
        document.getElementById("download").href = base64;

    });

});

ダウンロードは、ローカル実行では動かないことがあるのでお気を付けを（多分ブラウザのセキュリティレベルによるものかと）