var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');

var width = window.innerWidth;
var height = window.innerHeight;

canvas.width  = width;
canvas.height = height;

var a = Math.round(height * 0.08),
	b = Math.round(width * 0.1);

var square_svg = '<svg xmlns="http://www.w3.org/2000/svg" width="15" height="12"><rect width="12" height="12" style="fill:#6666FE" /></svg>';
var square_source = 'data:image/svg+xml;base64,'+window.btoa(square_svg);

var triangle_svg = '<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18"><polygon points="0,0 18,0 9,15.588" style="fill:#0000FE" /></svg>';
var triangle_source = 'data:image/svg+xml;base64,'+window.btoa(triangle_svg);

var circle_svg = '<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12"><circle cx="6" cy="6" r="5.5" style="fill:#323232" /></svg>';
var circle_source = 'data:image/svg+xml;base64,'+window.btoa(circle_svg);

var zigzag_svg = '<svg xmlns="http://www.w3.org/2000/svg" width="8" height="34"><polyline points="7,2 2,10 7,10 2,18 7,18 2,24 7,24 2,32" style="fill:transparent;stroke:#FB027F;stroke-width:2" /></svg>';
var zigzag_source = 'data:image/svg+xml;base64,'+window.btoa(zigzag_svg);


var square = new Image();
square.src = square_source;

var triangle = new Image();
triangle.src = triangle_source;

var circle = new Image();
circle.src = circle_source;

var zigzag = new Image();
zigzag.src = zigzag_source;

function random_int(min,max) {
	return Math.floor(Math.random()*(max-min+1)+min);
}

var rad = Math.PI/180;

function rotate_image(context, image, angleInRad, positionX, positionY, axisX, axisY) {
  context.translate( positionX, positionY );
  context.rotate( angleInRad * rad );
  context.drawImage( image, -axisX, -axisY );
  context.rotate( -(angleInRad * rad) );
  context.translate( -positionX, -positionY );
}

for (var x = 0; x < b; ++x){
	context.beginPath();
	context.moveTo(x*10+2.5,0);
	context.lineTo(x*10+2.5,height);
	context.strokeStyle = "#ddd"
	context.stroke();
}

for (var y = 0; y < a; ++y){
	context.beginPath();
	context.moveTo(0,y*15+2.5);
	context.lineTo(width,y*15+2.5);
	context.strokeStyle = "#ddd"
	context.stroke();
}

zigzag.onload = function() {
	for (var i = 0; i < a; ++i){
		for (var j = 0; j < a; ++j){
			console.log(j);
			if(i % 2 === 0) {
				if(j % 2 === 0) {
					rotate_image(context, triangle, random_int(0,360), Math.abs(80*j + random_int(-7,7)), Math.abs(69.282*i + random_int(-7,7)), 3.5, 3.5);
				} else {
					rotate_image(context, zigzag, random_int(0,360), Math.abs(80*j + random_int(-7,7)), Math.abs(69.282*i + random_int(-7,7)), 4, 1);
				}
			} else {
				if(j % 2 === 0) {
					rotate_image(context, square, random_int(0,360), Math.abs(80*j + 40 + random_int(-7,7)), Math.abs(69.282*i + random_int(-7,7)), 2.5, 2.5);
				} else {
					context.drawImage( circle, Math.abs(80*j + 40 + random_int(-7,7)), Math.abs(69.282*i + random_int(-7,7)));
				}
			}
		}
	}
}