test
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