var c = document.getElementById('canv'),

        $ = c.getContext('2d');

​

        //draw trunk

        $.beginPath();

        $.moveTo(220, 500);

        $.lineTo(260, 500);

        $.lineTo(260, 565);

        $.quadraticCurveTo(240, 575, 220, 565);

        $.closePath();

        $.fillStyle = 'hsl(11.2,93.8%,19%)';

        $.fill();

​

        // draw tree        

        $.beginPath();

        $.moveTo(240, 100);

        $.lineTo(120, 500);

        $.quadraticCurveTo(240, 530, 360, 500);

        $.closePath();

        var fillTree = $.createLinearGradient(240, 100, 240, 600);

        fillTree.addColorStop(0, 'hsla(128, 75%, 15%, 1)');

        fillTree.addColorStop(1, 'hsla(128, 85%, 25%, 1)');

        $.fillStyle = fillTree;

        $.fill();

        //$.stroke(); //outline tree - optional

​

        // generate ornaments

        var i = 0,

            ornamentCount = 4000

            ornaments = [];

        while (i < ornamentCount)

        {

            var x = Math.floor(Math.random()*240)+120,

                y = Math.floor(Math.random()*400)+120,

                color = '#' + ((x*10).toString(16) + (y*10).toString(16)).substr(0, 6);

​

            if ($.isPointInPath(x, y))

            {

                var ornament = {};

                ornament.x = x;

                ornament.y = y;

                ornament.color = color;

                ornaments[i] = ornament;

                i++;

            }

        }

​

        // clear path and draw ornaments

        $.lineWidth = 5;

        $.lineCap = 'round';

        for(i = 0; i<ornamentCount; i++)

        {

            var x = ornaments[i].x,

                y = ornaments[i].y,

                color = ornaments[i].color;

            $.beginPath();

            $.moveTo(x, y);

            $.lineTo(x, y+1);

            $.strokeStyle = color;

            $.stroke();

            $.closePath();

        }

​

        // draw big 'ol star on top

        $.beginPath();

        $.moveTo(240, 25);

        $.lineTo(254, 55);

        $.lineTo(289, 61);

        $.lineTo(265, 86);

        $.lineTo(270, 120);

        $.lineTo(240, 105);

        $.lineTo(210, 119);

        $.lineTo(215, 86);

        $.lineTo(191, 62);

        $.lineTo(225, 57);

        $.closePath();

        var fillStar = $.createRadialGradient(245, 73, 3, 235, 70, 50);

        fillStar.addColorStop(0, 'hsla(56, 95%, 55%, 1)');

        fillStar.addColorStop(1, 'hsla(49, 95%, 45%, 1)');

        $.fillStyle = fillStar;

        $.fill();