Edit in JSFiddle

var YourCryptoKey = '';
// Change the value for the algo notes
var setKeyNotes = function(algo){
 // Source: https://developer.mozilla.org/en-US/docs/Web/API/Web_Crypto_API/Supported_algorithms
 if(algo == 'AES-CBC')
 	document.getElementById("AlgorithmNotes").value = 'AES-CBC: Key usages for keys generated with this method are restricted to "encrypt", "decrypt", "wrapKey" or "unwrapKey". Key length must be 128, 192 or 256 bits.';
 else if(algo == 'AES-CTR')
 	document.getElementById("AlgorithmNotes").value = 'AES-CTR: Key usages for keys generated with this method are restricted to "encrypt", "decrypt", "wrapKey" or "unwrapKey". Key length must be 128, 192 or 256 bits.';
 else if(algo == 'AES-GCM')
 	document.getElementById("AlgorithmNotes").value = 'AES-GCM: Key usages for keys generated with this method are restricted to "encrypt", "decrypt", "wrapKey" or "unwrapKey". Key length must be 128, 192 or 256 bits.';
 else if(algo == 'RSA-OAEP')
 	document.getElementById("AlgorithmNotes").value = 'RSA-OAEP: Key usages for keys generated with this method are restricted to "encrypt", "decrypt", "wrapKey" or "unwrapKey". Requires a HashAlgorithmIdentifier with the hash algorithm to use, instead of a key length.';
 else if(algo == 'AES-KW')
 	document.getElementById("AlgorithmNotes").value = 'AES-KW: Key usages for keys generated with this method are restricted to "wrapKey" or "unwrapKey". Key length must be 128, 192 or 256 bits.';
 else if(algo == 'HMAC')
 	document.getElementById("AlgorithmNotes").value = 'HMAC: Key usages for keys generated with this method are restricted to "sign" or "verify". Also requires a HashAlgorithmIdentifier, the hash algorithm to use. Key length must be an optional positive integer indicating the size of the key to generate. If not provided, the size of the block of the hash function is used.';
 else if(algo == 'RSASSA-PKCS1-v1_5')
 	document.getElementById("AlgorithmNotes").value = 'RSASSA-PKCS1-v1_5: Key usages for keys generated with this method are restricted to "sign", "verify". Requires a HashAlgorithmIdentifier with the hash algorithm to use, instead of a key length.';
 else if(algo == 'ECDSA')
 	document.getElementById("AlgorithmNotes").value = 'ECDSA: Requires FireFox 36 or Chrome.';
 else if(algo == 'ECDH')
 	document.getElementById("AlgorithmNotes").value = 'ECDH: Not supported in Chrome?';
 else if(algo == 'DH')
 	document.getElementById("AlgorithmNotes").value = 'DH: Not supported in Chrome?';
 else
 	document.getElementById("AlgorithmNotes").value = '';
}

// Generate the actual encryption keys, based upon selections
var generateTheKeys = function(){
	// Get an array of selected KeyUses
	var checkboxes = document.getElementsByName('KeyUses');
	var arrKeyUses = new Array();
	for (var i=0, n=checkboxes.length;i<n;i++) {
		if (checkboxes[i].checked) 
			arrKeyUses.push(checkboxes[i].value);
	};
	// Which algorythm should I use?
	var objCryptoAlgorithm = {
		name: document.getElementById("CryptoAlgorithm").value,
		length: document.getElementById("KeyLength").value
	};
	// Should the key be extractable?
	var strExtractable = document.getElementById("ExtractableBoolean").value;
	// What should the key length be?
	var strKeyLength = document.getElementById("KeyLength").value;
	// This will return a promise of a new CryptoKey
	window.crypto.subtle.generateKey(objCryptoAlgorithm,strExtractable,arrKeyUses)
	.then(function(key){
	    console.log(key);
	    YourCryptoKey = key;
	    alert("success!");
	})
	.catch(function(err){
	    console.error(err);
	}); 
}

// Export the encryption keys that you have already generated
var exportTheKeys = function(){
	// Source: https://github.com/diafygi/webcrypto-examples#aes-ctr---exportkey
	window.crypto.subtle.exportKey(
		// the format
	    document.getElementById("ExportFormat").value, 
	    // the actual key
	    YourCryptoKey
	)
	.then(function(keydata){
	    //returns the exported key data
	    console.log(keydata);
	})
	.catch(function(err){
	    console.error(err);
	});
}
<h1>Encryption Keys with the Web Crypto API</h1>
<fieldset>
	<legend>Generate Key Pair</legend>

	<div class="formBlock">
		<label for="CryptoAlgorithm">Algorithm</label>
		<select id="CryptoAlgorithm" onchange="setKeyNotes(this.value);">
			<option value="">--</option>
			<option value="AES-CBC">AES in Cipher Block Chaining mode</option>
			<option value="AES-CTR">AES in Counter Mode</option>
			<option value="AES-GCM">AES in Galois/Counter Mode</option>
			<option value="RSA-OAEP">RSAES - Optimal Asymmetric Encryption Padding</option>
			<option value="AES-KW">key wrapping in AES</option>
			<option value="HMAC">hash-based message authentication</option>
			<option value="RSASSA-PKCS1-v1_5">RSASSA-PKCS1-v1_5</option>
			<option value="ECDSA">Elliptic Curve Digital Signature Algorithm</option>
			<option value="ECDH">Elliptic curve Diffie-Hellman</option>
			<option value="DH">Diffie-Helman</option>
		</select>
		<br />
		<label for="AlgorithmNotes">Notes About Algorithm</label>
		<textarea id="AlgorithmNotes" readonly=""></textarea>
	</div>

	<div class="formBlock">
		<label for="ExtractableBoolean">Should the key be extractable from the CryptoKey object?</label>
		<select id="ExtractableBoolean">
			<option value="true">Yes</option>
			<option value="false">No</option>
		</select>
	</div>

	<div class="formBlock">
		<label for="KeyLength">Key Length</label>
		<input id="KeyLength" type="text" size="20" maxlength="20">
	</div>

	<div class="formBlock">
		<label for="KeyUses">What do you want to be able to do with the key?</label>
		<br />
		<input type="checkbox" value="encrypt" name="KeyUses" id="encrypt">
		<label for="encrypt">encrypt - allow the key to be used for encrypting messages</label>
		<br />
		<input type="checkbox" value="decrypt" name="KeyUses" id="decrypt">
		<label for="decrypt">decrypt - allow the key to be used for decrypting messages</label>
		<br />
		<input type="checkbox" value="sign" name="KeyUses" id="sign">
		<label for="sign">sign - allow the key to be used for signing messages</label>
		<br />
		<input type="checkbox" value="verify" name="KeyUses" id="verify">
		<label for="verify">verify - allow the key to be used for verifying the signature of messages</label>
		<br />
		<input type="checkbox" value="deriveKey" name="KeyUses" id="deriveKey">
		<label for="deriveKey">deriveKey - allowing the key to be used as a base key when deriving a new key</label>
		<br />
		<input type="checkbox" value="deriveBits" name="KeyUses" id="deriveBits">
		<label for="deriveBits">deriveBits - allowing the key to be used as a base key when deriving bits of data for use in cryptographic primitives</label>
		<br />
		<input type="checkbox" value="wrapKey" name="KeyUses" id="wrapKey">
		<label for="wrapKey">wrapKey - allowing the key to wrap a symmetric key for usage (transfer, storage) in unsecure environments</label>
		<br />
		<input type="checkbox" value="unwrapKey" name="KeyUses" id="unwrapKey">
		<label for="unwrapKey">unwrapKey - allowing the key to unwrap a symmetric key for usage (transfer, storage) in unsecure environments</label>
	</div>

	<button onclick="generateTheKeys();" nosubmit>Generate Keys</button>
</fieldset>

<fieldset>
	<legend>Export the Keys</legend>
	<div class="formBlock">
		<label for="ExportFormat">Export Format</label>
		<select id="ExportFormat">
			<option value="raw">raw - the key as an array of bytes, usually a secret key.</option>
			<option value="pkcs8">pkcs8 - a private key, in the IETF Public Key-Cryptographic Standard Encryption #8.</option>
			<option value="spki">spki - usually a public key, in the Simple public key infrastructure standard</option>
			<option value="jwk">jwk - the key in the JSON Web Key format.</option>
		</select>
	</div>
	<button onclick="exportTheKeys();" nosubmit>Export</button>
</fieldset>
#AlgorithmNotes{
	width: 100%;
}
.formBlock{
	margin-bottom: 25px;
}