Canvas Draw Service

draw-service.js

'use strict';

/* global async: false */

/**
 * @ngdoc service
 * @name progApp.drawService
 * @description
 * # drawService
 * Factory in the progApp.
 */
angular.module('progApp').factory('drawService', function ($q) {

	// -------------------------------------------------
	//
	// Unloaded Images
	// 
	// -------------------------------------------------
	var images = [
		'wizard',
		'horse',
		'rock',
		'fish',
		'coconut',
		'couch',
		'dj',
		'dollars',
		'grapefruit',
		'jpop',
		'ninja',
		'spa',
		'steak',
		'strawberry',
		'sushi',
		'visa',
		'watermelon'
		];
	var backgrounds = [
		'background.jpg',
		'stars.jpg',
		'lightning.jpg',
		'hot-planet.jpg',
		'3d-cloud-planet.jpg',
		'3d-desert.jpg',
		'3d-alien-world.jpg',
		'rainbow.jpg'

		];

		var overlays = [
			'wizard-overlay'
		];




	// -------------------------------------------------
	//
	// Loaded
	// 
	// -------------------------------------------------
	var loadedImages = [];
	var loadedBackgrounds = [];
	var loadedOverlays = [];

	

	return {

		// -------------------------------------------------
		//
		// Set up canvases
		// 
		// -------------------------------------------------
		
		addCanvases: function(){

			var deferred = $q.defer();
			
			var parent = document.getElementById('main');
			var canvas = document.createElement('canvas');
			var bgCanvas = document.createElement('canvas');
			var textCanvas = document.createElement('canvas');

			var height = window.innerHeight - 50;

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

			textCanvas.height = height;
			textCanvas.width = height;

			canvas.style.position = 'absolute';
			canvas.style.top = '25px';
			canvas.style.left = '25px';
			canvas.style.zIndex = 3;
			canvas.setAttribute('id', 'canvas1');
			var context = canvas.getContext('2d');

			bgCanvas.style.position = 'absolute';
			bgCanvas.style.top = '25px';
			bgCanvas.style.left = '25px';
			bgCanvas.style.zIndex = 2;
			bgCanvas.setAttribute('id', 'canvas2');
			var context2 = bgCanvas.getContext('2d');

			textCanvas.style.position = 'absolute';
			textCanvas.style.top = '25px';
			textCanvas.style.left = '25px';
			textCanvas.style.zIndex = 2;
			textCanvas.setAttribute('id', 'canvas3');
			var context3 = textCanvas.getContext('2d');


			var devicePixelRatio = window.devicePixelRatio || 1;
			var backingStoreRatio = context.webkitBackingStorePixelRatio || context.mozBackingStorePixelRatio || context.msBackingStorePixelRatio || context.oBackingStorePixelRatio || context.backingStorePixelRatio || 1;

			var ratio = devicePixelRatio / backingStoreRatio;

			var oldWidth = canvas.height;
			var oldHeight = canvas.height;

			canvas.width = oldWidth * ratio;
			canvas.height = oldHeight * ratio;
			bgCanvas.width = oldWidth * ratio;
			bgCanvas.height = oldHeight * ratio;
			textCanvas.width = oldWidth * ratio;
			textCanvas.height = oldHeight * ratio;

			canvas.style.width = oldWidth + 'px';
			canvas.style.height = oldHeight + 'px';
			bgCanvas.style.width = oldWidth + 'px';
			bgCanvas.style.height = oldHeight + 'px';
			textCanvas.style.width = oldWidth + 'px';
			textCanvas.style.height = oldHeight + 'px';

			context.scale(ratio, ratio);
			context2.scale(ratio, ratio);
			context3.scale(ratio, ratio);





			var bgCtx = context2;


			parent.appendChild(canvas);

			parent.appendChild(bgCanvas);

			parent.appendChild(textCanvas);


			var returnObject = {
				canvas: canvas,
				bgCanvas: bgCanvas,
				bgCtx, bgCtx,
				ratio: ratio
			};


			WebFont.load({
				google: {
					families: ['Fredoka One']
				}
			});

			deferred.resolve(returnObject);




			return deferred.promise;

		},



		// ------------------------------------------------
		// Async function to load iamges
		//
		
		loadImages: function (initialWidth) {
			
			var deferred = $q.defer();



			async.each(images, function(file, callback){

				var image = new Image();

				image.onload = function(){
					var ogWidth = image.width;
					var ogHeight = image.height;
					var ratio = ogWidth / ogHeight;

					var newHeight = Math.floor(initialWidth / ratio);

					var imageObject = {
						w: initialWidth,
						h: newHeight,
						image: image
					};


					loadedImages.push(imageObject);
					callback();

				};


				image.src = 'images/' + file + '.png';



			}, function(err){
				if (err){
					console.log('An image failed to process');
					deferred.reject(err);
				}

				else{
					console.log('All images loaded');
					deferred.resolve(loadedImages);
				}
			});


			return deferred.promise;
		},




		// ------------------------------------------------
		// Returns random image from loaded pile
		//
		
		addNewImage: function(){
			var randomImage = loadedImages[Math.floor(Math.random() * loadedImages.length)];
			return randomImage;
		},



		// -------------------------------------------------
		//
		// Make sure backgrounds are square!!!
		// 
		// -------------------------------------------------
		
		loadBackgrounds: function(){
			var deferred = $q.defer();

			async.each(backgrounds, function(file, callback){
				
				var image = new Image();

				image.onload = function(){

					var bgObject = {
						img: image
					};


					loadedBackgrounds.push(bgObject);
					callback();
				};

				image.src = 'images/' + file;


			}, function(err){
				if (err){
					console.log(err);
					deferred.reject(err);
				}

				deferred.resolve(loadedBackgrounds);
			});

			return deferred.promise;
		},



		loadOverlays: function(initialWidth){
			var deferred = $q.defer();

			async.each(overlays, function(file, callback){

				var image = new Image();

				image.onload = function(){
					var ogWidth = image.width;
					var ogHeight = image.height;
					var ratio = ogWidth / ogHeight;

					var newHeight = Math.floor(initialWidth / ratio);

					var imageObject = {
						w: initialWidth,
						h: newHeight,
						image: image
					};

					loadedOverlays.push(imageObject);
					callback();
				};

				image.src = 'images/' + file + '.png';



			}, function(err){
				if (err){
					console.log(err);
					deferred.reject(err);
				}

				deferred.resolve(loadedOverlays);
			});


			return deferred.promise;
		},


		randomBackground: function(){
			var randomImage = loadedBackgrounds[Math.floor(Math.random() * loadedBackgrounds.length)];
			return randomImage;
		},

		getImages: function(){
			return loadedImages;
		}
	};
});