Below is JavaScript which creates a polygon or line depending on the radio button selected.
I want to convert my code as such that instead of radio button, I can execute function using simple input button. Do I have to write seperate event listeners for both buttons?
If so, how will I call them in HTML? Or will one event listener do just fine? How will the events be handled then?
function onPageLoaded()
{
canvas.addEventListener("click", onCanvasClick, false);
setInterval(updateScreen, 100);
}
function onCanvasClick(e)
{
var x = e.clientX-canvas.offsetLeft;
var y = e.clientY-canvas.offsetTop;
switch (byId('shapeType').value)
{
case 'poly': polyClick(x,y);
break;
case 'line': lineClick(x,y);
break;
}
}
Instead of this
<select id='shapeType'>
<option value="poly" selected>Polygon</option>
<option value="line">Line</option>
</select>
I want to use this
<input type="button" value="Add polygon">
<input type="button" value="Add line">
For full code u can see the solution of this thread http://www.codeproject.com/Answers/693319/unable-to-draw-more-then-1-shape-on-html5-canvas#answer1