<script>
window.onload = function() {
	
//// MAIN CANVAS
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");

////////////////////////////////////// start here

// NEW CANVAS = NEW LAYER
var canvas1 = document.createElement('canvas');
var context1 = canvas1.getContext('2d');

////////////////////////////////////// start here
/// FOUR POINT STAR
var cw = 50;
var ch = cw ;
					
x = 0;
y = 0;
					
var diff = -15;
					
var Ax = cw*5/10;
var Ay = ch*2/10;
var Bx = cw*4/10;
var By = ch*4/10;
var Cx = cw*2/10;
var Cy = ch*5/10;
var Dx = Bx;
var Dy = ch*6/10;
var Ex = Ax;
var Ey = ch*8/10;
var Fx = cw*6/10;
var Fy = Dy;
var Gx = cw*8/10;
var Gy = Cy;
var Hx = Fx;
var Hy = By; 

function STAR() {
					context1.moveTo(Ax, Ay);
					context1.lineTo(Bx, By);
					context1.lineTo(Cx, Cy);
					context1.lineTo(Dx, Dy);
					context1.lineTo(Ex, Ey);
					context1.lineTo(Fx, Fy);
					context1.lineTo(Gx, Gy);
					context1.lineTo(Hx, Hy);
					context1.lineTo(Ax, Ay);
					//
					context1.fillStyle = "yellow";
					context1.fill();
					context1.lineWidth = 2;
					context1.strokeStyle= "black";
					context1.lineJoin = "round";
					context1.lineCap = 'round';
					context1.stroke();
} ///// END STAR
for (var j=1; j<11; j++) { // COLUMNS
	for (var k=1; k<11; k++) { // ROWS
		
		STAR();
		
		var r = Math.PI * 2 * Math.random();
		
		var x = diff + j*cw/1.5;
		var y = diff + k*ch/1.5;
		
		context.save();
		context.translate(x,y);
		context.translate(cw/2, ch/2);
		context.rotate(r);
		context.drawImage(canvas1, -cw/2, -ch/2); 
		context.restore();
		
	}
}
////////////////////////////////////// end here
}

</script>