airider74
Reputation: 400
Canvas goes blank whenever my if conditions are false
I've run into an issue displaying data on my canvas. I have multiple if, else if statements that I wanted evaluated to determine which text to display based on user input.
If I create the condition where a single if statement is true, the text that should be displayed does. However when I add additional else if statements or if the single if statement evaluates as false, the canvas goes completely blank. Examples below:
if((<?php echo empty($row['civ1']);?>) &&
(<?php echo empty($row['civ2']);?>) &&
(<?php echo empty($row['civ3']);?>) &&
(<?php echo empty($row['civ4']);?>)){
ctx2.font = "16px Arial";
ctx2.fillStyle = "green";
ctx2.textAlign = "left";
ctx2.fillText("", 705, 175);
}
This works only if it is the only condition evaluated and the condition evaluates as true. If it evaluates as false, it causes my canvas to go blank.
Also if I add additional else if statements to handle other cases I want evaluated, the canvas always stays blank....
if((<?php echo empty($row['civ1']);?>) &&
(<?php echo empty($row['civ2']);?>) &&
(<?php echo empty($row['civ3']);?>) &&
(<?php echo empty($row['civ4']);?>)){
ctx2.font = "16px Arial";
ctx2.fillStyle = "green";
ctx2.textAlign = "left";
ctx2.fillText("", 705, 175);
}
else if((<?php echo !empty($row['civ1']);?>) &&
(<?php echo empty($row['civ2']);?>) &&
(<?php echo empty($row['civ3']);?>) &&
(<?php echo empty($row['civ4']);?>)){
ctx2.font = "16px Arial";
ctx2.fillStyle = "green";
ctx2.textAlign = "left";
ctx2.fillText("Civilian Goal: <?php echo ($row['civ1']);?>", 705, 175);
}
else if((<?php echo !empty($row['civ1']);?>) &&
(<?php echo !empty($row['civ2']);?>) &&
(<?php echo !empty($row['civ3']);?>) &&
(<?php echo empty($row['civ4']);?>)){
ctx2.font = "16px Arial";
ctx2.fillStyle = "green";
ctx2.textAlign = "left";
ctx2.fillText("Civilian Goal: <?php echo ($row['civ1']);?>", 650, 175);
ctx2.font = "16px Arial";
ctx2.fillStyle = "green";
ctx2.textAlign = "left";
ctx2.fillText("<?php echo ($row['civ2']);?>", 760, 195);
ctx2.font = "16px Arial";
ctx2.fillStyle = "green";
ctx2.textAlign = "left";
ctx2.fillText("<?php echo ($row['civ3']);?>", 760, 215);
}
Does this have something to do with how I use the empty statement in php or am I missing something else? I use code similar to this in other places of my canvas and it works as expected.
[edit]
Here's the full set of javascript I use to evaluate if the user has input values or if they are blank and then what text I want displayed based on those inputs.
if((<?php echo empty($row['civ1']);?>) &&
(<?php echo empty($row['civ2']);?>) &&
(<?php echo empty($row['civ3']);?>) &&
(<?php echo empty($row['civ4']);?>)){
ctx2.font = "16px Arial";
ctx2.fillStyle = "green";
ctx2.textAlign = "left";
ctx2.fillText("", 705, 175);
}
else if((<?php echo !empty($row['civ1']);?>) &&
(<?php echo empty($row['civ2']);?>) &&
(<?php echo empty($row['civ3']);?>) &&
(<?php echo empty($row['civ4']);?>)){
ctx2.font = "16px Arial";
ctx2.fillStyle = "green";
ctx2.textAlign = "left";
ctx2.fillText("Civilian Goal: <?php echo ($row['civ1']);?>", 705, 175);
}
else if((<?php echo !empty($row['civ1']);?>) &&
(<?php echo !empty($row['civ2']);?>) &&
(<?php echo !empty($row['civ3']);?>) &&
(<?php echo empty($row['civ4']);?>)){
ctx2.font = "16px Arial";
ctx2.fillStyle = "green";
ctx2.textAlign = "left";
ctx2.fillText("Civilian Goal: <?php echo ($row['civ1']);?>", 650, 175);
ctx2.font = "16px Arial";
ctx2.fillStyle = "green";
ctx2.textAlign = "left";
ctx2.fillText("<?php echo ($row['civ2']);?>", 760, 195);
ctx2.font = "16px Arial";
ctx2.fillStyle = "green";
ctx2.textAlign = "left";
ctx2.fillText("<?php echo ($row['civ3']);?>", 760, 215);
}
else if((<?php echo !empty($row['civ1']);?>) &&
(<?php echo !empty($row['civ2']);?>) &&
(<?php echo !empty($row['civ3']);?>) &&
(<?php echo !empty($row['civ4']);?>)){
ctx2.font = "16px Arial";
ctx2.fillStyle = "green";
ctx2.textAlign = "left";
ctx2.fillText("Civilian Goal: <?php echo ($row['civ1']);?>", 650, 175);
ctx2.font = "16px Arial";
ctx2.fillStyle = "green";
ctx2.textAlign = "left";
ctx2.fillText("<?php echo ($row['civ2']);?>", 760, 195);
ctx2.font = "16px Arial";
ctx2.fillStyle = "green";
ctx2.textAlign = "left";
ctx2.fillText("<?php echo ($row['civ3']);?>", 760, 215);
ctx2.font = "16px Arial";
ctx2.fillStyle = "green";
ctx2.textAlign = "left";
ctx2.fillText("<?php echo ($row['civ4']);?>", 760, 235);
}
else if((<?php echo empty($row['civ1']);?>) &&
(<?php echo !empty($row['civ2']);?>) &&
(<?php echo !empty($row['civ3']);?>) &&
(<?php echo !empty($row['civ4']);?>)){
ctx2.font = "16px Arial";
ctx2.fillStyle = "green";
ctx2.textAlign = "left";
ctx2.fillText("Civilian Goal: <?php echo ($row['civ2']);?>", 760, 175);
ctx2.font = "16px Arial";
ctx2.fillStyle = "green";
ctx2.textAlign = "left";
ctx2.fillText("<?php echo ($row['civ3']);?>", 760, 195);
ctx2.font = "16px Arial";
ctx2.fillStyle = "green";
ctx2.textAlign = "left";
ctx2.fillText("<?php echo ($row['civ4']);?>", 760, 215);
}
else if((<?php echo empty($row['civ1']);?>) &&
(<?php echo empty($row['civ2']);?>) &&
(<?php echo !empty($row['civ3']);?>) &&
(<?php echo !empty($row['civ4']);?>)){
ctx2.font = "16px Arial";
ctx2.fillStyle = "green";
ctx2.textAlign = "left";
ctx2.fillText("Civilian Goal: <?php echo ($row['civ3']);?>", 760, 175);
ctx2.font = "16px Arial";
ctx2.fillStyle = "green";
ctx2.textAlign = "left";
ctx2.fillText("<?php echo ($row['civ4']);?>", 760, 195);
}
else if((<?php echo empty($row['civ1']);?>) &&
(<?php echo empty($row['civ2']);?>) &&
(<?php echo empty($row['civ3']);?>) &&
(<?php echo !empty($row['civ4']);?>)){
ctx2.font = "16px Arial";
ctx2.fillStyle = "green";
ctx2.textAlign = "left";
ctx2.fillText("Civilian Goal: <?php echo ($row['civ4']);?>", 760, 175);
}
else if((<?php echo !empty($row['civ1']);?>) &&
(<?php echo empty($row['civ2']);?>) &&
(<?php echo !empty($row['civ3']);?>) &&
(<?php echo !empty($row['civ4']);?>)){
ctx2.font = "16px Arial";
ctx2.fillStyle = "green";
ctx2.textAlign = "left";
ctx2.fillText("Civilian Goal: <?php echo ($row['civ1']);?>", 650, 175);
ctx2.font = "16px Arial";
ctx2.fillStyle = "green";
ctx2.textAlign = "left";
ctx2.fillText("<?php echo ($row['civ3']);?>", 760, 195);
ctx2.font = "16px Arial";
ctx2.fillStyle = "green";
ctx2.textAlign = "left";
ctx2.fillText("<?php echo ($row['civ4']);?>", 760, 215);
}
else if((<?php echo !empty($row['civ1']);?>) &&
(<?php echo !empty($row['civ2']);?>) &&
(<?php echo empty($row['civ3']);?>) &&
(<?php echo !empty($row['civ4']);?>)){
ctx2.font = "16px Arial";
ctx2.fillStyle = "green";
ctx2.textAlign = "left";
ctx2.fillText("Civilian Goal: <?php echo ($row['civ1']);?>", 650, 175);
ctx2.font = "16px Arial";
ctx2.fillStyle = "green";
ctx2.textAlign = "left";
ctx2.fillText("<?php echo ($row['civ2']);?>", 760, 195);
ctx2.font = "16px Arial";
ctx2.fillStyle = "green";
ctx2.textAlign = "left";
ctx2.fillText("<?php echo ($row['civ4']);?>", 760, 215);
}
else if((<?php echo !empty($row['civ1']);?>) &&
(<?php echo empty($row['civ2']);?>) &&
(<?php echo empty($row['civ3']);?>) &&
(<?php echo !empty($row['civ4']);?>)){
ctx2.font = "16px Arial";
ctx2.fillStyle = "green";
ctx2.textAlign = "left";
ctx2.fillText("Civilian Goal: <?php echo ($row['civ1']);?>", 650, 175);
ctx2.font = "16px Arial";
ctx2.fillStyle = "green";
ctx2.textAlign = "left";
ctx2.fillText("<?php echo ($row['civ4']);?>", 760, 195);
}
else if((<?php echo empty($row['civ1']);?>) &&
(<?php echo !empty($row['civ2']);?>) &&
(<?php echo empty($row['civ3']);?>) &&
(<?php echo !empty($row['civ4']);?>)){
ctx2.font = "16px Arial";
ctx2.fillStyle = "green";
ctx2.textAlign = "left";
ctx2.fillText("Civilian Goal: <?php echo ($row['civ2']);?>", 650, 175);
ctx2.font = "16px Arial";
ctx2.fillStyle = "green";
ctx2.textAlign = "left";
ctx2.fillText("<?php echo ($row['civ4']);?>", 760, 195);
}
else if(((<?php echo empty($row['civ1']);?>) &&
(<?php echo !empty($row['civ2']);?>) &&
(<?php echo !empty($row['civ3']);?>) &&
(<?php echo empty($row['civ4']);?>)){
ctx2.font = "16px Arial";
ctx2.fillStyle = "green";
ctx2.textAlign = "left";
ctx2.fillText("Civilian Goal: <?php echo ($row['civ2']);?>", 650, 175);
ctx2.font = "16px Arial";
ctx2.fillStyle = "green";
ctx2.textAlign = "left";
ctx2.fillText("<?php echo ($row['civ3']);?>", 760, 195);
}
else if((<?php echo empty($row['civ1']);?>) &&
(<?php echo empty($row['civ2']);?>) &&
(<?php echo !empty($row['civ3']);?>) &&
(<?php echo !empty($row['civ4']);?>)){
ctx2.font = "16px Arial";
ctx2.fillStyle = "green";
ctx2.textAlign = "left";
ctx2.fillText("Civilian Goal: <?php echo ($row['civ3']);?>", 760, 175);
ctx2.font = "16px Arial";
ctx2.fillStyle = "green";
ctx2.textAlign = "left";
ctx2.fillText("<?php echo ($row['civ4']);?>", 760, 195);
}
else if((<?php echo empty($row['civ1']);?>) &&
(<?php echo empty($row['civ2']);?>) &&
(<?php echo !empty($row['civ3']);?>) &&
(<?php echo empty($row['civ4']);?>)){
ctx2.font = "16px Arial";
ctx2.fillStyle = "green";
ctx2.textAlign = "left";
ctx2.fillText("Civilian Goal: <?php echo ($row['civ3']);?>", 760, 175);
}
else if((<?php echo empty($row['civ1']);?>) &&
(<?php echo !empty($row['civ2']);?>) &&
(<?php echo empty($row['civ3']);?>) &&
(<?php echo empty($row['civ4']);?>)){
ctx2.font = "16px Arial";
ctx2.fillStyle = "green";
ctx2.textAlign = "left";
ctx2.fillText("Civilian Goal: <?php echo ($row['civ2']);?>", 760, 175);
}
Upvotes: 0
Views: 36
Answers (1)
Joshua K
Reputation: 2537
This code is a liitle bit... ugly. Here is a solution to make it better and treat the change of the context in the right way using json. It's also better to debug.
var rowObj = <?=json_encode($row);?>;
// the following settings are the same for all conditions:
ctx2.font = "16px Arial";
ctx2.fillStyle = "green";
ctx2.textAlign = "left";
if(!rowObj.civ1 && !rowObj.civ2 && !rowObj.civ3 && !rowObj.civ4){
ctx2.fillText("", 705, 175);
} else if(rowObj.civ1 && !rowObj.civ2 && !rowObj.civ3 && !rowObj.civ4){
ctx2.fillText("Civilian Goal: "+rowObj.civ1, 705, 175);
} else if(rowObj.civ1 && rowObj.civ2 && rowObj.civ3 && !rowObj.civ4){
ctx2.fillText("Civilian Goal: "+rowObj.civ1, 650, 175);
ctx2.fillText(rowObj.civ2, 760, 195);
ctx2.fillText(rowObj.civ3, 760, 215);
} else {
alert('None of the conditions are met!');
}
Upvotes: 1
Related Questions
- I followed a tutorial, but why does a simple if-statement not work?
- HTML Canvas not working for whatever reason
- Javascript canvas not working
- Trying to determine whether canvas is blank or not with javascript
- If condition is not behaving like it should be
- If statement not working (Javascript)
- HTML Canvas if/else
- Strange behavior of canvas javascript
- Something wrong with my canvas loop
- Why doesn't this Canvas show up?