Creates pretty shapes with fabric.js

fabric.js

function html5_canvas() {

    // declear variables
    var $canvas, $rect, $circle, $triangle, $i, $limit, $width, $height;


    //create canvas object with div id
    $canvas = new fabric.Canvas('canvas_1');

    // create Circle - note radius
    $circle = new fabric.Circle({
        top: 150,
        left: 150,
        radius: 99,
        fill: 'rgb(0,147,211)'
    });

    $canvas.add($circle);

    // create a rectangle 
    // note the ease of creating a shape at an angle
    $rect = new fabric.Rect({
        top: 290,
        left: 290,
        width: 150,
        height: 250,
        angle: -73,
        fill: 'rgb(255,241,12)'
    });

    $canvas.add($rect);

    // create a triangle
    $triangle = new fabric.Triangle({
        top: 450,
        left: 500,
        width: 200,
        height: 200,
        fill: 'rgb(204,0,107)'
    });

    $canvas.add($triangle);

    // create random shapes
    // declare variable values first
    $i = 0;
    $limit = 50;

    // function to create random numbers


    function random_num($value) {

        $result = Math.floor(Math.random() * $value);

        return $result;

    }


    // use for loop to create random  triangles, rectangles and circles
    for ($x = $limit; $x--;) {

        var $newRect = new fabric.Rect({
            width: random_num(99),
            height: random_num(99),
            fill: 'rgb(' + random_num(255) + ',' + random_num(255) + ',' + random_num(255) + ')',
            opacity: random_num(10) / 10,
            angle: random_num(365),
            top: random_num(500),
            left: random_num(650)
        });

        $canvas.add($newRect);

        var $newCircle = new fabric.Circle({
            radius: random_num(19),
            fill: 'rgb(' + random_num(255) + ',' + random_num(255) + ',' + random_num(255) + ')',
            opacity: random_num(10) / 10,
            top: random_num(500),
            left: random_num(650)
        });

        $canvas.add($newCircle);

        var $newTriangle = new fabric.Triangle({
            width: random_num(99),
            height: random_num(99),
            fill: 'rgb(' + random_num(255) + ',' + random_num(255) + ',' + random_num(255) + ')',
            opacity: random_num(10) / 10,
            angle: random_num(365),
            top: random_num(500),
            left: random_num(650)
        });

        $canvas.add($newTriangle);

    }

}

function init() {

    html5_canvas();

}

// call init function
window.addEventListener("load", init, false);