Using this project, you are supposed to be able to select a radio button for a specific color, click the big blue button, and a corresponding 150x150px color swatch will be drawn on an HTML canvas. I've gotten everything down up until the part where the image is to be displayed. I'm stuck on the switch statement.
I've also made a JSFiddle for this:
https://jsfiddle.net/sheradon/yuqqono6/12/
$(document).ready(function() { var tabClicked = true;var canvas = document.getElementById('canvas');var context = canvas.getContext('2d');var imgArray = new Array();imgArray[0] = new Image();imgArray[0].src = 'http://i.imgur.com/utPXYZM.jpg';imgArray[1] = new Image();imgArray[1].src = 'http://i.imgur.com/j7CfXVF.jpg';imgArray[2] = new Image();imgArray[2].src = 'http://i.imgur.com/muNhjqq.jpg';imgArray[3] = new Image();imgArray[3].src = 'http://i.imgur.com/SSSSvkD.jpg';imgArray[4] = new Image();imgArray[4].src = 'http://i.imgur.com/KMCsKTX.jpg';imgArray[5] = new Image();imgArray[5].src = 'http://i.imgur.com/QNe0jAr.jpg';imgArray[6] = new Image();imgArray[6].src = 'http://i.imgur.com/QbzmJlE.jpg'; $('#colorstab').click(function() { if(tabClicked == true) { $('#colorstab').animate( { marginTop:'-8px' }, 0 ); $('#colorsbox').toggle(); tabClicked = false; } else { $('.radiobutton').prop('checked', false); $('#colorstab').animate( { marginTop:'83px' }, 0); $('#colorsbox').toggle(); tabClicked = true; } });});function doButtonStuff() { console.log('Button is working'); var radioButton = document.getElementsByName('selection'); for (var i = 0; i < document.filterform.selection.length; i++) { if (document.filterform.selection[i].checked) { var radioValue = document.filterform.selection[i].value; alert(radioValue); return radioValue; } switch (document.getElementById('canvas')) { case (radioValue == 'cyan'): canvas.getContext('2d').drawImage(imgArray[6],0,0); break; } }}