Below is the javascript code that is relevant
<script>
$.fn.ready(function() {
var source = $('#source').val();
Meme('url1', 'canvas','','');
$('#top-line, #bottom-line').keyup(function() {
Meme(source, 'canvas', $('#top-line').val(), $('#bottom-line').val());
if(document.getElementById('stanley').checked) {
source = 'url2';
Meme(source, 'canvas', $('#top-line').val(), $('#bottom-line').val());
} else if(document.getElementById('futurama').checked) {
source = 'url3';
Meme(source, 'canvas', $('#top-line').val(), $('#bottom-line').val());
}
});
});
</script>
Here is the HTML content
<div class="col-lg-12 col-md-12 col-sm-12">
<input type="radio" name="meme" id="stanley" class="input-hidden" />
<label for="stanley"><img src="url3" alt="" width="80px;" height="80px;"/></label>
<input type="radio" name="meme" id="futurama" class="input-hidden" />
<label for="futurama"><img src="url4" alt="" width="80px;" height="80px;" /></label>
</div>
<div class="col-lg-6 col-md-6 col-sm-12" id="containcanvas" style="margin-top:10px;">
<canvas id="canvas"></canvas>
</div>
<div class="col-lg-6 col-md-6 col-sm-12" style="margin-top:10px;">
<form>
<input class="form-control" id="source" placeholder="Image URL">
<input class="form-control" id="top-line" placeholder="Enter top line text">
<input class="form-control" id="bottom-line" placeholder="Enter bottom line text">
</form>
The canvas currently updates when the top-line and bottom-line values change. To update the canvas once a radio button is checked, the functionality has been integrated into the section where changes in the top and bottom lines affect the canvas. However, this approach is not optimal as indicated by the user. Additionally, the canvas does not update after entering an image URL in the source input field. Suggestions are needed on how to modify the code so that all canvases are updated immediately upon checking a radio button or changing any input text value.