Is it possible to only display the selected image? I have a set of buttons that allow customers to customize an image.
For example, the user selects a shape like a circle, which is then displayed. The next step involves selecting a pattern to display inside the circle. I want the transparent part of the shapes (circle, rectangle, and heart) to be visible only on the inside.
Here's the code snippet:
function display(){
if (document.getElementById('shape1').checked)
{
var ctx = document.getElementById('display_image').getContext('2d');
var imageObj = new Image();
imageObj.onload = function()
{ ctx.drawImage(imageObj, 0, 0); }
imageObj.src = 'http://image.flaticon.com/icons/png/512/33/33848.png';
}
if (document.getElementById('shape2').checked)
{
var ctx = document.getElementById('display_image').getContext('2d');
var imageObj = new Image();
imageObj.onload = function()
{ ctx.drawImage(imageObj, 0, 0); }
imageObj.src = 'http://image.flaticon.com/icons/png/512/33/33848.png';
}
}
if (document.getElementById('pattern1').checked)
{
var ctx = document.getElementById('display_image').getContext('2d');
var imageObj = new Image();
imageObj.onload = function()
{ ctx.drawImage(imageObj, 0, 0); }
imageObj.src = 'https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTw_LgFWAcL6RzFH4EApgo69TX7xx6iUyPqLANgi5qdJ6QL9CY';
}
}
if (document.getElementById('pattern2').checked)
{
var ctx = document.getElementById('display_image').getContext('2d');
var imageObj = new Image();
imageObj.onload = function()
{ ctx.drawImage(imageObj, 0, 0); }
imageObj.src = 'https://s-media-cache-ak0.pinimg.com/originals/8b/09/59/8b0959d17298294904713dbb94b00827.png';
}
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form role="form" id="showchoices" name="showchoices" method="post">
<div> <input type="radio" id="shape1" name="shape_design" value="CIRCLE" onchange="display()"/> O
<input type="radio" id="shape2" name="shape_design" value="RECTANGLE" onchange="display()"/> [] </div>
<div> <input type="radio" id="pattern1" name="pat_design" value="pattern2" onchange="display()"/> pattern1
<input type="radio" id="pattern2" name="pat_design" value="pattern1" onchange="display()"/> pattern2 </div> -- i would like the pattern not to overlap the shape, send to back and visible.
</form>
<div id="display_image" name="display_image" width="400px" height="400px"> </div>The functionality I am looking for is similar to this example, but without the animation. The radio buttons trigger the display of images in a static manner. -- http://jsfiddle.net/djnBD/
I am also trying to incorporate this process into the following sample - https://jsfiddle.net/Twisty/955j8so3/27/
THANK YOU IN ADVANCE!!!