Prevent user from selecting two identical colors (close #12)

static/canvas.js

@@ -166,10 +166,20 @@ window.addEventListener('load', function() {
   if (params['signature'])
     document.getElementById('signature').value = params['signature'];
 
+  // Prevent user from selecting two identical colors
+  let inputs = document.querySelectorAll('.colorpicker input[type="radio"]');
+  for (let i = 0; i < inputs.length; ++i) {
+    inputs[i].addEventListener('click', function(e) {
+      if (document.querySelector('.colorpicker input[type="radio"][name="bgColor"]:checked').value
+	  == document.querySelector('.colorpicker input[type="radio"][name="fgColor"]:checked').value)
+	e.preventDefault();
+    });
+  }
+
   // Add event listeners to inputs
-  let inputs = document.querySelectorAll('.colorpicker input[type="radio"], #step3 input[type="radio"], input[type="radio"][name="icon"]');
+  inputs = document.querySelectorAll('.colorpicker input[type="radio"], #step3 input[type="radio"], input[type="radio"][name="icon"]');
   for (let i = 0; i < inputs.length; ++i) {
-    inputs[i].onchange = draw;
+    inputs[i].addEventListener('change', draw);
   }
   document.getElementById('step2value').oninput = draw;
   document.getElementById('signature').oninput = draw;