使用单选按钮显示/隐藏画布

Question

I'm new to Javascript and Canvas, there's a lot of resources I've used and now I got confused. I'm doing a dress customization using Canvas. This is my HTML:

 //these are my button samples
<input type="radio" id="shape1" name="round" onchange="display()" /> 
<input type="radio" id="shape2" name="box" onchange="display()" />

// this is where I'll display the canvas
<canvas id="displaycanvas" height="450px" width="820px" style="position:absolute;"> </canvas>

So for my Javascript I have this:

  function display() { 
    if (document.getElementById('shape1').checked) {
      var canvasC = document.getElementById('displaycanvas'),
          context = canvasC.getContext('2d');
           context.beginPath();
           context.arc(95,50,40,0,2*Math.PI);
           context.stroke();     }

    if (document.getElementById('shape2').checked) {
      var canvasR = document.getElementById('displaycanvas'),
          context = canvasR.getContext('2d');
            context.beginPath();
            context.rect(50, 27, 350, 400);    }
}

They are all working fine, it displays the shapes if I choose one of these buttons. My concern is how do I display only 1 shape at a time.

I'm not sure if toggle was the right thing, please tell me what is the right thing to do. Thank you very much in advance,

Answer 1

You need to give the radios the same name to toggle them and you need to clear the canvas too.

I have used the same name for the canvas now

 window.onload = function() { document.querySelector("#shape1").onclick = document.querySelector("#shape2").onclick = function() { var canvas = document.querySelector('#displaycanvas'); context = canvas.getContext('2d'); context.clearRect(0,0,canvas.width,canvas.height); context.beginPath(); if (this.id == "shape1") { context.arc(95, 50, 40, 0, 2 * Math.PI); } else { context.rect(50, 27, 350, 400); } context.stroke(); } } 

 <input type="radio" id="shape1" name="shape" value="round" /> <input type="radio" id="shape2" name="shape" value="box" /> <canvas id="displaycanvas" height="450px" width="820px" style="position:absolute;"></canvas> 

If you want TWO canvases, you can do

window.onload = function() {
  document.querySelector("#shape1").onclick = function() {
    document.querySelector('#displaycanvas1').style.display="";
    document.querySelector('#displaycanvas2').style.display="none";
  }
  document.querySelector("#shape2").onclick = function() {
    document.querySelector('#displaycanvas2').style.display="";
    document.querySelector('#displaycanvas1').style.display="none";
  }
}

still giving the radios the same name

Answer 2

If the radio buttons have the same name attribute, they will alternate between the available ones. If they have different name attributes, they will be grouped separately.

 function display() { var s1 = document.querySelector('#shape1').checked, s2 = document.querySelector('#shape2').checked; alert("shape1: " + s1 + ", shape2: " + s2) } function display2() { var s3 = document.querySelector('#shape3').checked, s4 = document.querySelector('#shape4').checked; alert("shape3: " + s3 + ", shape4: " + s4) } 

 1-2 <input type="radio" name="shape" value="shape1" id="shape1" onclick="display()" /> <input type="radio" name="shape" value="shape2" id="shape2" onclick="display()" /> <br /><br /> 3-4 <input type="radio" name="round" value="shape3" id="shape3" onclick="display2()" /> <input type="radio" name="square" value="shape4" id="shape4" onclick="display2()" /> 

Answer 3

You can use the below code to achieve your requirement:

 function display() { var canvasC = document.getElementById('displaycanvas'); context = canvasC.getContext('2d'); context.clearRect(0, 0, canvasC.width, canvasC.height); if (document.getElementById('shape1').checked) { context.beginPath(); context.arc(95,50,40,0,2*Math.PI); context.stroke(); } if (document.getElementById('shape2').checked) { context.beginPath(); context.rect(50, 27, 350, 400); context.stroke(); } } 

 <input type="radio" id="shape1" name="round[]" onchange="display()" /> <input type="radio" id="shape2" name="round[]" onchange="display()" /> <canvas id="displaycanvas" height="450px" width="820px" style="position:absolute;"> </canvas>