Quantcast
Channel: User Misha Krul - Stack Overflow
Viewing all articles
Browse latest Browse all 42

Displaying different images on an HTML canvas according to selected radio button

$
0
0

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;    }    }}

Viewing all articles
Browse latest Browse all 42

Trending Articles