Question

This is probably a stupid & obvious question, but does anyone know how to change an image being displayed in a canvas using dropdown menus or radio buttons?

So if I had a red cloudy image and I wanted to replace it with, say, a green cloudy image, using the dropdowns/radios, how would I do it?

Answer 1

Use the onChange-Event of the dropDown menu or radiobutton and call a javascript function, passing to it the name of the image.

<input type="radio" name="cloud" value="red" onChange="javascript:imgChange('red.gif')"> Red cloud<br>
<input type="radio" name="cloud" value="blue" onChange="javascript:imgChange('blue.gif')"> Blue cloud<br>
<input type="radio" name="cloud" value="green" onChange="javascript:imgChange('green.gif')"> green cloud

Using javascript you can now build a function to change the image.

function imgChange(var img){
    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    var img = new Image;
    // set your image according to the parameter
    ctx.drawImage(img,10,10);
}