ScottRookie ScottRookie - 24 days ago 7
HTML Question

Display same canvas shape when radio checked from different function

Pardon if my title is a little bit confusing, but what I'm trying to reach out is that I've wanted to change the stroke color and it should follow the path depending the shape chosen from the first step.

I've been through different resources and apparently combined them and got confused.

this is my html, home.html:

// These are my choices for the first step in designing.
<input type="radio" id="shape1" name="shape_design" onchange="display()" /> circle
<input type="radio" id="shape2" name="shape_design" onchange="display()" /> rectangle
//2nd step, choose color
<input type="radio" id="color1" name="color_design" onchange="display()" /> RED
<input type="radio" id="color2" name="color_design" onchange="display()" /> BLUE

<canvas id="displaycanvas" height="450px" width="820px" style="position:absolute;"> </canvas>


This is my Script it's in different file, design.js:

function display() { //I have a main function since I'm adding amount (which i got it)
var canvas = document.getElementById('displaycanvas');
context = canvas.getContext('2d');
context.clearRect(0, 0, canvas.width, canvas.height);

function Shape_display(){ //shape function
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, 50, 100); context.stroke(); }
}


function Color_display(){ //color function
if (document.getElementById('color1').checked) { //for the red
if (Shape_display() == checked('shape1') ) { //This isn't working, to check from the previous choice
context.beginPath();
context.arc(95,50,40,0,2*Math.PI);
context.strokeStyle = 'red';
context.stroke(); }

else {
(Shape_display() == checked('shape2') ) { //same here
context.beginPath();
context.rect(50, 27, 50, 100); context.stroke();
context.strokeStyle = 'red';
context.stroke(); }
}
}
}


What I wanted to happen is something like this:
IMAGE SAMPLE

I have no idea what's the right code hope someone could help me out. THANK YOU SO MUCH IN ADVANCE!

Answer

Here you go! I simplified it for you.

Three errors you made:

  • You didn't call Color_display().
  • Color_display and Shape_display were redundant.
  • Shape_display didn't return anything, but you were checking to see what its return value was.

Anyways, hope you like it:

function display() { //I have a main function since I'm adding amount (which i got it)
 var canvas = document.getElementById('displaycanvas');
 context = canvas.getContext('2d');
 context.clearRect(0, 0, canvas.width, canvas.height);

    if(document.getElementById('color1').checked){
      context.strokeStyle="#FF0000";
    } else if(document.getElementById('color2').checked){
      context.strokeStyle="#0000FF";
    }
    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, 50, 100);
            context.stroke();    }
}
<canvas id="displaycanvas"></canvas>
// These are my choices for the first step in designing.
<input type="radio" id="shape1" name="shape_design" onchange="display()" /> circle 
<input type="radio" id="shape2" name="shape_design" onchange="display()" /> rectangle 


//2nd step, choose color
<input type="radio" id="color1" name="color_design" onchange="display()" /> RED  
<input type="radio" id="color2" name="color_design" onchange="display()" /> BLUE