canvas javascript one button multiple functions
0
Right now I have three buttons below the canvas and each one corresponds to a different light.
You click the red button and that circle turns red and the other two remain grey.
I click the yellow button and that circle turns yellow and the other two remain grey.
The same goes for the other two buttons.
I need one button that performs the function of all three buttons.
- the first click turns the top circle red and the other two remain grey.
- Another click of the same button turns the middle circle yellow and the top light turns back to grey and the bottom light remains grey.
- And the third click turns the bottom light green and the other two go grey.
- A fourth click resets all three circles.
var canvas = document.getElementById("myCanvas");
var red = canvas.getContext("2d");
var yellow = canvas.getContext("2d");
var green = canvas.getContext("2d");
red.beginPath();
red.arc(95, 50, 40, 0, 2 * Math.PI);
red.fillStyle = 'grey';
red.fill();
red.stroke();
red.closePath();
yellow.beginPath();
yellow.arc(95, 150, 40, 0, 2 * Math.PI);
yellow.fillStyle = 'grey';
yellow.fill();
yellow.stroke();
yellow.closePath();
green.beginPath();
green.arc(95, 250, 40, 0, 2 * Math.PI);
green.fillStyle = 'grey';
green.fill();
green.stroke();
green.closePath();
// Turns the top light red and other two lights stay grey
function redLight()
var canvas = document.getElementById("myCanvas");
var red = canvas.getContext("2d");
red.beginPath();
red.arc(95, 50, 40, 0, 2 * Math.PI);
red.fillStyle = 'red';
red.fill();
red.stroke();
red.closePath();
yellow.beginPath();
yellow.arc(95, 150, 40, 0, 2 * Math.PI);
yellow.fillStyle = 'grey';
yellow.fill();
yellow.stroke();
yellow.closePath();
green.beginPath();
green.arc(95, 250, 40, 0, 2 * Math.PI);
green.fillStyle = 'grey';
green.fill();
green.stroke();
green.closePath();
// Turns the middle light yellow and the other two remain grey
function yellowLight()
var canvas = document.getElementById("myCanvas");
var yellow = canvas.getContext("2d");
red.beginPath();
red.arc(95, 50, 40, 0, 2 * Math.PI);
red.fillStyle = 'grey';
red.fill();
red.stroke();
red.closePath();
yellow.beginPath();
yellow.arc(95, 150, 40, 0, 2 * Math.PI);
yellow.fillStyle = 'lightyellow';
yellow.fill();
yellow.stroke();
yellow.closePath();
green.beginPath();
green.arc(95, 250, 40, 0, 2 * Math.PI);
green.fillStyle = 'grey';
green.fill();
green.stroke();
green.closePath();
// Turns the bottom light green and the other two remain grey
function greenLight()
var canvas = document.getElementById("myCanvas");
var green = canvas.getContext("2d");
red.beginPath();
red.arc(95, 50, 40, 0, 2 * Math.PI);
red.fillStyle = 'grey';
red.fill();
red.stroke();
red.closePath();
yellow.beginPath();
yellow.arc(95, 150, 40, 0, 2 * Math.PI);
yellow.fillStyle = 'grey';
yellow.fill();
yellow.stroke();
yellow.closePath();
green.beginPath();
green.arc(95, 250, 40, 0, 2 * Math.PI);
green.fillStyle = 'lightgreen';
green.fill();
green.stroke();
green.closePath();
<canvas id="myCanvas" width="250" height="300" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
<br/>Three buttons corresponding to the different lights on a traffic light
<p><button id="button" onclick="redLight();">Red Light!</button></p>
<p><button id="button" onclick="yellowLight();">Yellow Light!</button></p>
<p><button id="button" onclick="greenLight();">Green Light!</button></p>javascript button canvas
edited Nov 11 at 7:51
mplungjan
86.6k20122181
asked Nov 11 at 7:44
user7123308
62
add a comment |
0
Right now I have three buttons below the canvas and each one corresponds to a different light.
You click the red button and that circle turns red and the other two remain grey.
I click the yellow button and that circle turns yellow and the other two remain grey.
The same goes for the other two buttons.
I need one button that performs the function of all three buttons.
- the first click turns the top circle red and the other two remain grey.
- Another click of the same button turns the middle circle yellow and the top light turns back to grey and the bottom light remains grey.
- And the third click turns the bottom light green and the other two go grey.
- A fourth click resets all three circles.
var canvas = document.getElementById("myCanvas");
var red = canvas.getContext("2d");
var yellow = canvas.getContext("2d");
var green = canvas.getContext("2d");
red.beginPath();
red.arc(95, 50, 40, 0, 2 * Math.PI);
red.fillStyle = 'grey';
red.fill();
red.stroke();
red.closePath();
yellow.beginPath();
yellow.arc(95, 150, 40, 0, 2 * Math.PI);
yellow.fillStyle = 'grey';
yellow.fill();
yellow.stroke();
yellow.closePath();
green.beginPath();
green.arc(95, 250, 40, 0, 2 * Math.PI);
green.fillStyle = 'grey';
green.fill();
green.stroke();
green.closePath();
// Turns the top light red and other two lights stay grey
function redLight()
var canvas = document.getElementById("myCanvas");
var red = canvas.getContext("2d");
red.beginPath();
red.arc(95, 50, 40, 0, 2 * Math.PI);
red.fillStyle = 'red';
red.fill();
red.stroke();
red.closePath();
yellow.beginPath();
yellow.arc(95, 150, 40, 0, 2 * Math.PI);
yellow.fillStyle = 'grey';
yellow.fill();
yellow.stroke();
yellow.closePath();
green.beginPath();
green.arc(95, 250, 40, 0, 2 * Math.PI);
green.fillStyle = 'grey';
green.fill();
green.stroke();
green.closePath();
// Turns the middle light yellow and the other two remain grey
function yellowLight()
var canvas = document.getElementById("myCanvas");
var yellow = canvas.getContext("2d");
red.beginPath();
red.arc(95, 50, 40, 0, 2 * Math.PI);
red.fillStyle = 'grey';
red.fill();
red.stroke();
red.closePath();
yellow.beginPath();
yellow.arc(95, 150, 40, 0, 2 * Math.PI);
yellow.fillStyle = 'lightyellow';
yellow.fill();
yellow.stroke();
yellow.closePath();
green.beginPath();
green.arc(95, 250, 40, 0, 2 * Math.PI);
green.fillStyle = 'grey';
green.fill();
green.stroke();
green.closePath();
// Turns the bottom light green and the other two remain grey
function greenLight()
var canvas = document.getElementById("myCanvas");
var green = canvas.getContext("2d");
red.beginPath();
red.arc(95, 50, 40, 0, 2 * Math.PI);
red.fillStyle = 'grey';
red.fill();
red.stroke();
red.closePath();
yellow.beginPath();
yellow.arc(95, 150, 40, 0, 2 * Math.PI);
yellow.fillStyle = 'grey';
yellow.fill();
yellow.stroke();
yellow.closePath();
green.beginPath();
green.arc(95, 250, 40, 0, 2 * Math.PI);
green.fillStyle = 'lightgreen';
green.fill();
green.stroke();
green.closePath();
<canvas id="myCanvas" width="250" height="300" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
<br/>Three buttons corresponding to the different lights on a traffic light
<p><button id="button" onclick="redLight();">Red Light!</button></p>
<p><button id="button" onclick="yellowLight();">Yellow Light!</button></p>
<p><button id="button" onclick="greenLight();">Green Light!</button></p>javascript button canvas
edited Nov 11 at 7:51
mplungjan
86.6k20122181
asked Nov 11 at 7:44
user7123308
62
I need one button that performs all three functions.
– user7123308
Nov 11 at 7:53
add a comment |
0
0
0
Right now I have three buttons below the canvas and each one corresponds to a different light.
You click the red button and that circle turns red and the other two remain grey.
I click the yellow button and that circle turns yellow and the other two remain grey.
The same goes for the other two buttons.
I need one button that performs the function of all three buttons.
- the first click turns the top circle red and the other two remain grey.
- Another click of the same button turns the middle circle yellow and the top light turns back to grey and the bottom light remains grey.
- And the third click turns the bottom light green and the other two go grey.
- A fourth click resets all three circles.
var canvas = document.getElementById("myCanvas");
var red = canvas.getContext("2d");
var yellow = canvas.getContext("2d");
var green = canvas.getContext("2d");
red.beginPath();
red.arc(95, 50, 40, 0, 2 * Math.PI);
red.fillStyle = 'grey';
red.fill();
red.stroke();
red.closePath();
yellow.beginPath();
yellow.arc(95, 150, 40, 0, 2 * Math.PI);
yellow.fillStyle = 'grey';
yellow.fill();
yellow.stroke();
yellow.closePath();
green.beginPath();
green.arc(95, 250, 40, 0, 2 * Math.PI);
green.fillStyle = 'grey';
green.fill();
green.stroke();
green.closePath();
// Turns the top light red and other two lights stay grey
function redLight()
var canvas = document.getElementById("myCanvas");
var red = canvas.getContext("2d");
red.beginPath();
red.arc(95, 50, 40, 0, 2 * Math.PI);
red.fillStyle = 'red';
red.fill();
red.stroke();
red.closePath();
yellow.beginPath();
yellow.arc(95, 150, 40, 0, 2 * Math.PI);
yellow.fillStyle = 'grey';
yellow.fill();
yellow.stroke();
yellow.closePath();
green.beginPath();
green.arc(95, 250, 40, 0, 2 * Math.PI);
green.fillStyle = 'grey';
green.fill();
green.stroke();
green.closePath();
// Turns the middle light yellow and the other two remain grey
function yellowLight()
var canvas = document.getElementById("myCanvas");
var yellow = canvas.getContext("2d");
red.beginPath();
red.arc(95, 50, 40, 0, 2 * Math.PI);
red.fillStyle = 'grey';
red.fill();
red.stroke();
red.closePath();
yellow.beginPath();
yellow.arc(95, 150, 40, 0, 2 * Math.PI);
yellow.fillStyle = 'lightyellow';
yellow.fill();
yellow.stroke();
yellow.closePath();
green.beginPath();
green.arc(95, 250, 40, 0, 2 * Math.PI);
green.fillStyle = 'grey';
green.fill();
green.stroke();
green.closePath();
// Turns the bottom light green and the other two remain grey
function greenLight()
var canvas = document.getElementById("myCanvas");
var green = canvas.getContext("2d");
red.beginPath();
red.arc(95, 50, 40, 0, 2 * Math.PI);
red.fillStyle = 'grey';
red.fill();
red.stroke();
red.closePath();
yellow.beginPath();
yellow.arc(95, 150, 40, 0, 2 * Math.PI);
yellow.fillStyle = 'grey';
yellow.fill();
yellow.stroke();
yellow.closePath();
green.beginPath();
green.arc(95, 250, 40, 0, 2 * Math.PI);
green.fillStyle = 'lightgreen';
green.fill();
green.stroke();
green.closePath();
<canvas id="myCanvas" width="250" height="300" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
<br/>Three buttons corresponding to the different lights on a traffic light
<p><button id="button" onclick="redLight();">Red Light!</button></p>
<p><button id="button" onclick="yellowLight();">Yellow Light!</button></p>
<p><button id="button" onclick="greenLight();">Green Light!</button></p>javascript button canvas
edited Nov 11 at 7:51
mplungjan
86.6k20122181
asked Nov 11 at 7:44
user7123308
62
Right now I have three buttons below the canvas and each one corresponds to a different light.
You click the red button and that circle turns red and the other two remain grey.
I click the yellow button and that circle turns yellow and the other two remain grey.
The same goes for the other two buttons.
I need one button that performs the function of all three buttons.
- the first click turns the top circle red and the other two remain grey.
- Another click of the same button turns the middle circle yellow and the top light turns back to grey and the bottom light remains grey.
- And the third click turns the bottom light green and the other two go grey.
- A fourth click resets all three circles.
var canvas = document.getElementById("myCanvas");
var red = canvas.getContext("2d");
var yellow = canvas.getContext("2d");
var green = canvas.getContext("2d");
red.beginPath();
red.arc(95, 50, 40, 0, 2 * Math.PI);
red.fillStyle = 'grey';
red.fill();
red.stroke();
red.closePath();
yellow.beginPath();
yellow.arc(95, 150, 40, 0, 2 * Math.PI);
yellow.fillStyle = 'grey';
yellow.fill();
yellow.stroke();
yellow.closePath();
green.beginPath();
green.arc(95, 250, 40, 0, 2 * Math.PI);
green.fillStyle = 'grey';
green.fill();
green.stroke();
green.closePath();
// Turns the top light red and other two lights stay grey
function redLight()
var canvas = document.getElementById("myCanvas");
var red = canvas.getContext("2d");
red.beginPath();
red.arc(95, 50, 40, 0, 2 * Math.PI);
red.fillStyle = 'red';
red.fill();
red.stroke();
red.closePath();
yellow.beginPath();
yellow.arc(95, 150, 40, 0, 2 * Math.PI);
yellow.fillStyle = 'grey';
yellow.fill();
yellow.stroke();
yellow.closePath();
green.beginPath();
green.arc(95, 250, 40, 0, 2 * Math.PI);
green.fillStyle = 'grey';
green.fill();
green.stroke();
green.closePath();
// Turns the middle light yellow and the other two remain grey
function yellowLight()
var canvas = document.getElementById("myCanvas");
var yellow = canvas.getContext("2d");
red.beginPath();
red.arc(95, 50, 40, 0, 2 * Math.PI);
red.fillStyle = 'grey';
red.fill();
red.stroke();
red.closePath();
yellow.beginPath();
yellow.arc(95, 150, 40, 0, 2 * Math.PI);
yellow.fillStyle = 'lightyellow';
yellow.fill();
yellow.stroke();
yellow.closePath();
green.beginPath();
green.arc(95, 250, 40, 0, 2 * Math.PI);
green.fillStyle = 'grey';
green.fill();
green.stroke();
green.closePath();
// Turns the bottom light green and the other two remain grey
function greenLight()
var canvas = document.getElementById("myCanvas");
var green = canvas.getContext("2d");
red.beginPath();
red.arc(95, 50, 40, 0, 2 * Math.PI);
red.fillStyle = 'grey';
red.fill();
red.stroke();
red.closePath();
yellow.beginPath();
yellow.arc(95, 150, 40, 0, 2 * Math.PI);
yellow.fillStyle = 'grey';
yellow.fill();
yellow.stroke();
yellow.closePath();
green.beginPath();
green.arc(95, 250, 40, 0, 2 * Math.PI);
green.fillStyle = 'lightgreen';
green.fill();
green.stroke();
green.closePath();
<canvas id="myCanvas" width="250" height="300" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
<br/>Three buttons corresponding to the different lights on a traffic light
<p><button id="button" onclick="redLight();">Red Light!</button></p>
<p><button id="button" onclick="yellowLight();">Yellow Light!</button></p>
<p><button id="button" onclick="greenLight();">Green Light!</button></p>var canvas = document.getElementById("myCanvas");
var red = canvas.getContext("2d");
var yellow = canvas.getContext("2d");
var green = canvas.getContext("2d");
red.beginPath();
red.arc(95, 50, 40, 0, 2 * Math.PI);
red.fillStyle = 'grey';
red.fill();
red.stroke();
red.closePath();
yellow.beginPath();
yellow.arc(95, 150, 40, 0, 2 * Math.PI);
yellow.fillStyle = 'grey';
yellow.fill();
yellow.stroke();
yellow.closePath();
green.beginPath();
green.arc(95, 250, 40, 0, 2 * Math.PI);
green.fillStyle = 'grey';
green.fill();
green.stroke();
green.closePath();
// Turns the top light red and other two lights stay grey
function redLight()
var canvas = document.getElementById("myCanvas");
var red = canvas.getContext("2d");
red.beginPath();
red.arc(95, 50, 40, 0, 2 * Math.PI);
red.fillStyle = 'red';
red.fill();
red.stroke();
red.closePath();
yellow.beginPath();
yellow.arc(95, 150, 40, 0, 2 * Math.PI);
yellow.fillStyle = 'grey';
yellow.fill();
yellow.stroke();
yellow.closePath();
green.beginPath();
green.arc(95, 250, 40, 0, 2 * Math.PI);
green.fillStyle = 'grey';
green.fill();
green.stroke();
green.closePath();
// Turns the middle light yellow and the other two remain grey
function yellowLight()
var canvas = document.getElementById("myCanvas");
var yellow = canvas.getContext("2d");
red.beginPath();
red.arc(95, 50, 40, 0, 2 * Math.PI);
red.fillStyle = 'grey';
red.fill();
red.stroke();
red.closePath();
yellow.beginPath();
yellow.arc(95, 150, 40, 0, 2 * Math.PI);
yellow.fillStyle = 'lightyellow';
yellow.fill();
yellow.stroke();
yellow.closePath();
green.beginPath();
green.arc(95, 250, 40, 0, 2 * Math.PI);
green.fillStyle = 'grey';
green.fill();
green.stroke();
green.closePath();
// Turns the bottom light green and the other two remain grey
function greenLight()
var canvas = document.getElementById("myCanvas");
var green = canvas.getContext("2d");
red.beginPath();
red.arc(95, 50, 40, 0, 2 * Math.PI);
red.fillStyle = 'grey';
red.fill();
red.stroke();
red.closePath();
yellow.beginPath();
yellow.arc(95, 150, 40, 0, 2 * Math.PI);
yellow.fillStyle = 'grey';
yellow.fill();
yellow.stroke();
yellow.closePath();
green.beginPath();
green.arc(95, 250, 40, 0, 2 * Math.PI);
green.fillStyle = 'lightgreen';
green.fill();
green.stroke();
green.closePath();
<canvas id="myCanvas" width="250" height="300" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
<br/>Three buttons corresponding to the different lights on a traffic light
<p><button id="button" onclick="redLight();">Red Light!</button></p>
<p><button id="button" onclick="yellowLight();">Yellow Light!</button></p>
<p><button id="button" onclick="greenLight();">Green Light!</button></p>var canvas = document.getElementById("myCanvas");
var red = canvas.getContext("2d");
var yellow = canvas.getContext("2d");
var green = canvas.getContext("2d");
red.beginPath();
red.arc(95, 50, 40, 0, 2 * Math.PI);
red.fillStyle = 'grey';
red.fill();
red.stroke();
red.closePath();
yellow.beginPath();
yellow.arc(95, 150, 40, 0, 2 * Math.PI);
yellow.fillStyle = 'grey';
yellow.fill();
yellow.stroke();
yellow.closePath();
green.beginPath();
green.arc(95, 250, 40, 0, 2 * Math.PI);
green.fillStyle = 'grey';
green.fill();
green.stroke();
green.closePath();
// Turns the top light red and other two lights stay grey
function redLight()
var canvas = document.getElementById("myCanvas");
var red = canvas.getContext("2d");
red.beginPath();
red.arc(95, 50, 40, 0, 2 * Math.PI);
red.fillStyle = 'red';
red.fill();
red.stroke();
red.closePath();
yellow.beginPath();
yellow.arc(95, 150, 40, 0, 2 * Math.PI);
yellow.fillStyle = 'grey';
yellow.fill();
yellow.stroke();
yellow.closePath();
green.beginPath();
green.arc(95, 250, 40, 0, 2 * Math.PI);
green.fillStyle = 'grey';
green.fill();
green.stroke();
green.closePath();
// Turns the middle light yellow and the other two remain grey
function yellowLight()
var canvas = document.getElementById("myCanvas");
var yellow = canvas.getContext("2d");
red.beginPath();
red.arc(95, 50, 40, 0, 2 * Math.PI);
red.fillStyle = 'grey';
red.fill();
red.stroke();
red.closePath();
yellow.beginPath();
yellow.arc(95, 150, 40, 0, 2 * Math.PI);
yellow.fillStyle = 'lightyellow';
yellow.fill();
yellow.stroke();
yellow.closePath();
green.beginPath();
green.arc(95, 250, 40, 0, 2 * Math.PI);
green.fillStyle = 'grey';
green.fill();
green.stroke();
green.closePath();
// Turns the bottom light green and the other two remain grey
function greenLight()
var canvas = document.getElementById("myCanvas");
var green = canvas.getContext("2d");
red.beginPath();
red.arc(95, 50, 40, 0, 2 * Math.PI);
red.fillStyle = 'grey';
red.fill();
red.stroke();
red.closePath();
yellow.beginPath();
yellow.arc(95, 150, 40, 0, 2 * Math.PI);
yellow.fillStyle = 'grey';
yellow.fill();
yellow.stroke();
yellow.closePath();
green.beginPath();
green.arc(95, 250, 40, 0, 2 * Math.PI);
green.fillStyle = 'lightgreen';
green.fill();
green.stroke();
green.closePath();
<canvas id="myCanvas" width="250" height="300" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
<br/>Three buttons corresponding to the different lights on a traffic light
<p><button id="button" onclick="redLight();">Red Light!</button></p>
<p><button id="button" onclick="yellowLight();">Yellow Light!</button></p>
<p><button id="button" onclick="greenLight();">Green Light!</button></p>javascript button canvas
javascript button canvas
edited Nov 11 at 7:51
mplungjan
86.6k20122181
asked Nov 11 at 7:44
user7123308
62
edited Nov 11 at 7:51
mplungjan
86.6k20122181
asked Nov 11 at 7:44
user7123308
62
edited Nov 11 at 7:51
mplungjan
86.6k20122181
edited Nov 11 at 7:51
mplungjan
86.6k20122181
edited Nov 11 at 7:51
mplungjan
86.6k20122181
86.6k20122181
asked Nov 11 at 7:44
user7123308
62
asked Nov 11 at 7:44
user7123308
62
asked Nov 11 at 7:44
user7123308
62
62
I need one button that performs all three functions.
– user7123308
Nov 11 at 7:53
add a comment |
I need one button that performs all three functions.
– user7123308
Nov 11 at 7:53
I need one button that performs all three functions.
– user7123308
Nov 11 at 7:53
I need one button that performs all three functions.
– user7123308
Nov 11 at 7:53
add a comment |
2 Answers
2
active
oldest
votes
-1
Create a common function and iterate it through a global variable.
var gblVal = 0;
var canvas = document.getElementById("myCanvas");
var red = canvas.getContext("2d");
var yellow = canvas.getContext("2d");
var green = canvas.getContext("2d");
red.beginPath();
red.arc(95, 50, 40, 0, 2 * Math.PI);
red.fillStyle = 'grey';
red.fill();
red.stroke();
red.closePath();
yellow.beginPath();
yellow.arc(95, 150, 40, 0, 2 * Math.PI);
yellow.fillStyle = 'grey';
yellow.fill();
yellow.stroke();
yellow.closePath();
green.beginPath();
green.arc(95, 250, 40, 0, 2 * Math.PI);
green.fillStyle = 'grey';
green.fill();
green.stroke();
green.closePath();
function commpnFunc()
if (gblVal >= 0 && gblVal < 3)
gblVal = gblVal + 1;
else
gblVal = 0;
if (gblVal == 1)
redLight();
if (gblVal == 2)
yellowLight();
if (gblVal == 3)
greenLight();
if (gblVal == 0)
var red = canvas.getContext("2d");
var yellow = canvas.getContext("2d");
var green = canvas.getContext("2d");
red.beginPath();
red.arc(95, 50, 40, 0, 2 * Math.PI);
red.fillStyle = 'grey';
red.fill();
red.stroke();
red.closePath();
yellow.beginPath();
yellow.arc(95, 150, 40, 0, 2 * Math.PI);
yellow.fillStyle = 'grey';
yellow.fill();
yellow.stroke();
yellow.closePath();
green.beginPath();
green.arc(95, 250, 40, 0, 2 * Math.PI);
green.fillStyle = 'grey';
green.fill();
green.stroke();
green.closePath();
// Turns the top light red and other two lights stay grey
function redLight()
var canvas = document.getElementById("myCanvas");
var red = canvas.getContext("2d");
red.beginPath();
red.arc(95, 50, 40, 0, 2 * Math.PI);
red.fillStyle = 'red';
red.fill();
red.stroke();
red.closePath();
yellow.beginPath();
yellow.arc(95, 150, 40, 0, 2 * Math.PI);
yellow.fillStyle = 'grey';
yellow.fill();
yellow.stroke();
yellow.closePath();
green.beginPath();
green.arc(95, 250, 40, 0, 2 * Math.PI);
green.fillStyle = 'grey';
green.fill();
green.stroke();
green.closePath();
// Turns the middle light yellow and the other two remain grey
function yellowLight()
var canvas = document.getElementById("myCanvas");
var yellow = canvas.getContext("2d");
red.beginPath();
red.arc(95, 50, 40, 0, 2 * Math.PI);
red.fillStyle = 'grey';
red.fill();
red.stroke();
red.closePath();
yellow.beginPath();
yellow.arc(95, 150, 40, 0, 2 * Math.PI);
yellow.fillStyle = 'lightyellow';
yellow.fill();
yellow.stroke();
yellow.closePath();
green.beginPath();
green.arc(95, 250, 40, 0, 2 * Math.PI);
green.fillStyle = 'grey';
green.fill();
green.stroke();
green.closePath();
// Turns the bottom light green and the other two remain grey
function greenLight()
var canvas = document.getElementById("myCanvas");
var green = canvas.getContext("2d");
red.beginPath();
red.arc(95, 50, 40, 0, 2 * Math.PI);
red.fillStyle = 'grey';
red.fill();
red.stroke();
red.closePath();
yellow.beginPath();
yellow.arc(95, 150, 40, 0, 2 * Math.PI);
yellow.fillStyle = 'grey';
yellow.fill();
yellow.stroke();
yellow.closePath();
green.beginPath();
green.arc(95, 250, 40, 0, 2 * Math.PI);
green.fillStyle = 'lightgreen';
green.fill();
green.stroke();
green.closePath();
<canvas id="myCanvas" width="250" height="300" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas><br/>
<p><button id="button" onclick="commpnFunc();">Red Light!</button></p>edited Nov 11 at 8:34
mplungjan
86.6k20122181
answered Nov 11 at 8:14
Neeraj Dwivedi
726
This is horribly ineffective. Have ONE function to change the lights
– mplungjan
Nov 11 at 8:34
add a comment |
0
DRY - Don't Repeat Yourself
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var pos =
"red": 50,
"yellow": 150,
"green": 250
;
var colors = Object.keys(pos);
var cnt = 0;
function drawLight(color, on)
ctx.beginPath();
ctx.arc(95, pos[color], 40, 0, 2 * Math.PI);
ctx.fillStyle = on ? color : 'grey';
ctx.fill();
ctx.stroke();
ctx.closePath();
document.getElementById("button").addEventListener("click", changeLight);
function changeLight( )
colors.forEach(function(color, i)
drawLight(color, cnt==i);
);
document.getElementById("button").innerHTML = colors[cnt]
changeLight();<canvas id="myCanvas" width="250" height="300" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
<br/>Three buttons corresponding to the different lights on a traffic light
<p>
<button id="button" ">Change!</button></p>answered Nov 11 at 8:03
mplungjan
86.6k20122181
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53246787%2fcanvas-javascript-one-button-multiple-functions%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
-1
Create a common function and iterate it through a global variable.
var gblVal = 0;
var canvas = document.getElementById("myCanvas");
var red = canvas.getContext("2d");
var yellow = canvas.getContext("2d");
var green = canvas.getContext("2d");
red.beginPath();
red.arc(95, 50, 40, 0, 2 * Math.PI);
red.fillStyle = 'grey';
red.fill();
red.stroke();
red.closePath();
yellow.beginPath();
yellow.arc(95, 150, 40, 0, 2 * Math.PI);
yellow.fillStyle = 'grey';
yellow.fill();
yellow.stroke();
yellow.closePath();
green.beginPath();
green.arc(95, 250, 40, 0, 2 * Math.PI);
green.fillStyle = 'grey';
green.fill();
green.stroke();
green.closePath();
function commpnFunc()
if (gblVal >= 0 && gblVal < 3)
gblVal = gblVal + 1;
else
gblVal = 0;
if (gblVal == 1)
redLight();
if (gblVal == 2)
yellowLight();
if (gblVal == 3)
greenLight();
if (gblVal == 0)
var red = canvas.getContext("2d");
var yellow = canvas.getContext("2d");
var green = canvas.getContext("2d");
red.beginPath();
red.arc(95, 50, 40, 0, 2 * Math.PI);
red.fillStyle = 'grey';
red.fill();
red.stroke();
red.closePath();
yellow.beginPath();
yellow.arc(95, 150, 40, 0, 2 * Math.PI);
yellow.fillStyle = 'grey';
yellow.fill();
yellow.stroke();
yellow.closePath();
green.beginPath();
green.arc(95, 250, 40, 0, 2 * Math.PI);
green.fillStyle = 'grey';
green.fill();
green.stroke();
green.closePath();
// Turns the top light red and other two lights stay grey
function redLight()
var canvas = document.getElementById("myCanvas");
var red = canvas.getContext("2d");
red.beginPath();
red.arc(95, 50, 40, 0, 2 * Math.PI);
red.fillStyle = 'red';
red.fill();
red.stroke();
red.closePath();
yellow.beginPath();
yellow.arc(95, 150, 40, 0, 2 * Math.PI);
yellow.fillStyle = 'grey';
yellow.fill();
yellow.stroke();
yellow.closePath();
green.beginPath();
green.arc(95, 250, 40, 0, 2 * Math.PI);
green.fillStyle = 'grey';
green.fill();
green.stroke();
green.closePath();
// Turns the middle light yellow and the other two remain grey
function yellowLight()
var canvas = document.getElementById("myCanvas");
var yellow = canvas.getContext("2d");
red.beginPath();
red.arc(95, 50, 40, 0, 2 * Math.PI);
red.fillStyle = 'grey';
red.fill();
red.stroke();
red.closePath();
yellow.beginPath();
yellow.arc(95, 150, 40, 0, 2 * Math.PI);
yellow.fillStyle = 'lightyellow';
yellow.fill();
yellow.stroke();
yellow.closePath();
green.beginPath();
green.arc(95, 250, 40, 0, 2 * Math.PI);
green.fillStyle = 'grey';
green.fill();
green.stroke();
green.closePath();
// Turns the bottom light green and the other two remain grey
function greenLight()
var canvas = document.getElementById("myCanvas");
var green = canvas.getContext("2d");
red.beginPath();
red.arc(95, 50, 40, 0, 2 * Math.PI);
red.fillStyle = 'grey';
red.fill();
red.stroke();
red.closePath();
yellow.beginPath();
yellow.arc(95, 150, 40, 0, 2 * Math.PI);
yellow.fillStyle = 'grey';
yellow.fill();
yellow.stroke();
yellow.closePath();
green.beginPath();
green.arc(95, 250, 40, 0, 2 * Math.PI);
green.fillStyle = 'lightgreen';
green.fill();
green.stroke();
green.closePath();
<canvas id="myCanvas" width="250" height="300" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas><br/>
<p><button id="button" onclick="commpnFunc();">Red Light!</button></p>edited Nov 11 at 8:34
mplungjan
86.6k20122181
answered Nov 11 at 8:14
Neeraj Dwivedi
726
This is horribly ineffective. Have ONE function to change the lights
– mplungjan
Nov 11 at 8:34
add a comment |
-1
Create a common function and iterate it through a global variable.
var gblVal = 0;
var canvas = document.getElementById("myCanvas");
var red = canvas.getContext("2d");
var yellow = canvas.getContext("2d");
var green = canvas.getContext("2d");
red.beginPath();
red.arc(95, 50, 40, 0, 2 * Math.PI);
red.fillStyle = 'grey';
red.fill();
red.stroke();
red.closePath();
yellow.beginPath();
yellow.arc(95, 150, 40, 0, 2 * Math.PI);
yellow.fillStyle = 'grey';
yellow.fill();
yellow.stroke();
yellow.closePath();
green.beginPath();
green.arc(95, 250, 40, 0, 2 * Math.PI);
green.fillStyle = 'grey';
green.fill();
green.stroke();
green.closePath();
function commpnFunc()
if (gblVal >= 0 && gblVal < 3)
gblVal = gblVal + 1;
else
gblVal = 0;
if (gblVal == 1)
redLight();
if (gblVal == 2)
yellowLight();
if (gblVal == 3)
greenLight();
if (gblVal == 0)
var red = canvas.getContext("2d");
var yellow = canvas.getContext("2d");
var green = canvas.getContext("2d");
red.beginPath();
red.arc(95, 50, 40, 0, 2 * Math.PI);
red.fillStyle = 'grey';
red.fill();
red.stroke();
red.closePath();
yellow.beginPath();
yellow.arc(95, 150, 40, 0, 2 * Math.PI);
yellow.fillStyle = 'grey';
yellow.fill();
yellow.stroke();
yellow.closePath();
green.beginPath();
green.arc(95, 250, 40, 0, 2 * Math.PI);
green.fillStyle = 'grey';
green.fill();
green.stroke();
green.closePath();
// Turns the top light red and other two lights stay grey
function redLight()
var canvas = document.getElementById("myCanvas");
var red = canvas.getContext("2d");
red.beginPath();
red.arc(95, 50, 40, 0, 2 * Math.PI);
red.fillStyle = 'red';
red.fill();
red.stroke();
red.closePath();
yellow.beginPath();
yellow.arc(95, 150, 40, 0, 2 * Math.PI);
yellow.fillStyle = 'grey';
yellow.fill();
yellow.stroke();
yellow.closePath();
green.beginPath();
green.arc(95, 250, 40, 0, 2 * Math.PI);
green.fillStyle = 'grey';
green.fill();
green.stroke();
green.closePath();
// Turns the middle light yellow and the other two remain grey
function yellowLight()
var canvas = document.getElementById("myCanvas");
var yellow = canvas.getContext("2d");
red.beginPath();
red.arc(95, 50, 40, 0, 2 * Math.PI);
red.fillStyle = 'grey';
red.fill();
red.stroke();
red.closePath();
yellow.beginPath();
yellow.arc(95, 150, 40, 0, 2 * Math.PI);
yellow.fillStyle = 'lightyellow';
yellow.fill();
yellow.stroke();
yellow.closePath();
green.beginPath();
green.arc(95, 250, 40, 0, 2 * Math.PI);
green.fillStyle = 'grey';
green.fill();
green.stroke();
green.closePath();
// Turns the bottom light green and the other two remain grey
function greenLight()
var canvas = document.getElementById("myCanvas");
var green = canvas.getContext("2d");
red.beginPath();
red.arc(95, 50, 40, 0, 2 * Math.PI);
red.fillStyle = 'grey';
red.fill();
red.stroke();
red.closePath();
yellow.beginPath();
yellow.arc(95, 150, 40, 0, 2 * Math.PI);
yellow.fillStyle = 'grey';
yellow.fill();
yellow.stroke();
yellow.closePath();
green.beginPath();
green.arc(95, 250, 40, 0, 2 * Math.PI);
green.fillStyle = 'lightgreen';
green.fill();
green.stroke();
green.closePath();
<canvas id="myCanvas" width="250" height="300" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas><br/>
<p><button id="button" onclick="commpnFunc();">Red Light!</button></p>edited Nov 11 at 8:34
mplungjan
86.6k20122181
answered Nov 11 at 8:14
Neeraj Dwivedi
726
This is horribly ineffective. Have ONE function to change the lights
– mplungjan
Nov 11 at 8:34
add a comment |
-1
-1
-1
Create a common function and iterate it through a global variable.
var gblVal = 0;
var canvas = document.getElementById("myCanvas");
var red = canvas.getContext("2d");
var yellow = canvas.getContext("2d");
var green = canvas.getContext("2d");
red.beginPath();
red.arc(95, 50, 40, 0, 2 * Math.PI);
red.fillStyle = 'grey';
red.fill();
red.stroke();
red.closePath();
yellow.beginPath();
yellow.arc(95, 150, 40, 0, 2 * Math.PI);
yellow.fillStyle = 'grey';
yellow.fill();
yellow.stroke();
yellow.closePath();
green.beginPath();
green.arc(95, 250, 40, 0, 2 * Math.PI);
green.fillStyle = 'grey';
green.fill();
green.stroke();
green.closePath();
function commpnFunc()
if (gblVal >= 0 && gblVal < 3)
gblVal = gblVal + 1;
else
gblVal = 0;
if (gblVal == 1)
redLight();
if (gblVal == 2)
yellowLight();
if (gblVal == 3)
greenLight();
if (gblVal == 0)
var red = canvas.getContext("2d");
var yellow = canvas.getContext("2d");
var green = canvas.getContext("2d");
red.beginPath();
red.arc(95, 50, 40, 0, 2 * Math.PI);
red.fillStyle = 'grey';
red.fill();
red.stroke();
red.closePath();
yellow.beginPath();
yellow.arc(95, 150, 40, 0, 2 * Math.PI);
yellow.fillStyle = 'grey';
yellow.fill();
yellow.stroke();
yellow.closePath();
green.beginPath();
green.arc(95, 250, 40, 0, 2 * Math.PI);
green.fillStyle = 'grey';
green.fill();
green.stroke();
green.closePath();
// Turns the top light red and other two lights stay grey
function redLight()
var canvas = document.getElementById("myCanvas");
var red = canvas.getContext("2d");
red.beginPath();
red.arc(95, 50, 40, 0, 2 * Math.PI);
red.fillStyle = 'red';
red.fill();
red.stroke();
red.closePath();
yellow.beginPath();
yellow.arc(95, 150, 40, 0, 2 * Math.PI);
yellow.fillStyle = 'grey';
yellow.fill();
yellow.stroke();
yellow.closePath();
green.beginPath();
green.arc(95, 250, 40, 0, 2 * Math.PI);
green.fillStyle = 'grey';
green.fill();
green.stroke();
green.closePath();
// Turns the middle light yellow and the other two remain grey
function yellowLight()
var canvas = document.getElementById("myCanvas");
var yellow = canvas.getContext("2d");
red.beginPath();
red.arc(95, 50, 40, 0, 2 * Math.PI);
red.fillStyle = 'grey';
red.fill();
red.stroke();
red.closePath();
yellow.beginPath();
yellow.arc(95, 150, 40, 0, 2 * Math.PI);
yellow.fillStyle = 'lightyellow';
yellow.fill();
yellow.stroke();
yellow.closePath();
green.beginPath();
green.arc(95, 250, 40, 0, 2 * Math.PI);
green.fillStyle = 'grey';
green.fill();
green.stroke();
green.closePath();
// Turns the bottom light green and the other two remain grey
function greenLight()
var canvas = document.getElementById("myCanvas");
var green = canvas.getContext("2d");
red.beginPath();
red.arc(95, 50, 40, 0, 2 * Math.PI);
red.fillStyle = 'grey';
red.fill();
red.stroke();
red.closePath();
yellow.beginPath();
yellow.arc(95, 150, 40, 0, 2 * Math.PI);
yellow.fillStyle = 'grey';
yellow.fill();
yellow.stroke();
yellow.closePath();
green.beginPath();
green.arc(95, 250, 40, 0, 2 * Math.PI);
green.fillStyle = 'lightgreen';
green.fill();
green.stroke();
green.closePath();
<canvas id="myCanvas" width="250" height="300" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas><br/>
<p><button id="button" onclick="commpnFunc();">Red Light!</button></p>edited Nov 11 at 8:34
mplungjan
86.6k20122181
answered Nov 11 at 8:14
Neeraj Dwivedi
726
Create a common function and iterate it through a global variable.
var gblVal = 0;
var canvas = document.getElementById("myCanvas");
var red = canvas.getContext("2d");
var yellow = canvas.getContext("2d");
var green = canvas.getContext("2d");
red.beginPath();
red.arc(95, 50, 40, 0, 2 * Math.PI);
red.fillStyle = 'grey';
red.fill();
red.stroke();
red.closePath();
yellow.beginPath();
yellow.arc(95, 150, 40, 0, 2 * Math.PI);
yellow.fillStyle = 'grey';
yellow.fill();
yellow.stroke();
yellow.closePath();
green.beginPath();
green.arc(95, 250, 40, 0, 2 * Math.PI);
green.fillStyle = 'grey';
green.fill();
green.stroke();
green.closePath();
function commpnFunc()
if (gblVal >= 0 && gblVal < 3)
gblVal = gblVal + 1;
else
gblVal = 0;
if (gblVal == 1)
redLight();
if (gblVal == 2)
yellowLight();
if (gblVal == 3)
greenLight();
if (gblVal == 0)
var red = canvas.getContext("2d");
var yellow = canvas.getContext("2d");
var green = canvas.getContext("2d");
red.beginPath();
red.arc(95, 50, 40, 0, 2 * Math.PI);
red.fillStyle = 'grey';
red.fill();
red.stroke();
red.closePath();
yellow.beginPath();
yellow.arc(95, 150, 40, 0, 2 * Math.PI);
yellow.fillStyle = 'grey';
yellow.fill();
yellow.stroke();
yellow.closePath();
green.beginPath();
green.arc(95, 250, 40, 0, 2 * Math.PI);
green.fillStyle = 'grey';
green.fill();
green.stroke();
green.closePath();
// Turns the top light red and other two lights stay grey
function redLight()
var canvas = document.getElementById("myCanvas");
var red = canvas.getContext("2d");
red.beginPath();
red.arc(95, 50, 40, 0, 2 * Math.PI);
red.fillStyle = 'red';
red.fill();
red.stroke();
red.closePath();
yellow.beginPath();
yellow.arc(95, 150, 40, 0, 2 * Math.PI);
yellow.fillStyle = 'grey';
yellow.fill();
yellow.stroke();
yellow.closePath();
green.beginPath();
green.arc(95, 250, 40, 0, 2 * Math.PI);
green.fillStyle = 'grey';
green.fill();
green.stroke();
green.closePath();
// Turns the middle light yellow and the other two remain grey
function yellowLight()
var canvas = document.getElementById("myCanvas");
var yellow = canvas.getContext("2d");
red.beginPath();
red.arc(95, 50, 40, 0, 2 * Math.PI);
red.fillStyle = 'grey';
red.fill();
red.stroke();
red.closePath();
yellow.beginPath();
yellow.arc(95, 150, 40, 0, 2 * Math.PI);
yellow.fillStyle = 'lightyellow';
yellow.fill();
yellow.stroke();
yellow.closePath();
green.beginPath();
green.arc(95, 250, 40, 0, 2 * Math.PI);
green.fillStyle = 'grey';
green.fill();
green.stroke();
green.closePath();
// Turns the bottom light green and the other two remain grey
function greenLight()
var canvas = document.getElementById("myCanvas");
var green = canvas.getContext("2d");
red.beginPath();
red.arc(95, 50, 40, 0, 2 * Math.PI);
red.fillStyle = 'grey';
red.fill();
red.stroke();
red.closePath();
yellow.beginPath();
yellow.arc(95, 150, 40, 0, 2 * Math.PI);
yellow.fillStyle = 'grey';
yellow.fill();
yellow.stroke();
yellow.closePath();
green.beginPath();
green.arc(95, 250, 40, 0, 2 * Math.PI);
green.fillStyle = 'lightgreen';
green.fill();
green.stroke();
green.closePath();
<canvas id="myCanvas" width="250" height="300" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas><br/>
<p><button id="button" onclick="commpnFunc();">Red Light!</button></p>var gblVal = 0;
var canvas = document.getElementById("myCanvas");
var red = canvas.getContext("2d");
var yellow = canvas.getContext("2d");
var green = canvas.getContext("2d");
red.beginPath();
red.arc(95, 50, 40, 0, 2 * Math.PI);
red.fillStyle = 'grey';
red.fill();
red.stroke();
red.closePath();
yellow.beginPath();
yellow.arc(95, 150, 40, 0, 2 * Math.PI);
yellow.fillStyle = 'grey';
yellow.fill();
yellow.stroke();
yellow.closePath();
green.beginPath();
green.arc(95, 250, 40, 0, 2 * Math.PI);
green.fillStyle = 'grey';
green.fill();
green.stroke();
green.closePath();
function commpnFunc()
if (gblVal >= 0 && gblVal < 3)
gblVal = gblVal + 1;
else
gblVal = 0;
if (gblVal == 1)
redLight();
if (gblVal == 2)
yellowLight();
if (gblVal == 3)
greenLight();
if (gblVal == 0)
var red = canvas.getContext("2d");
var yellow = canvas.getContext("2d");
var green = canvas.getContext("2d");
red.beginPath();
red.arc(95, 50, 40, 0, 2 * Math.PI);
red.fillStyle = 'grey';
red.fill();
red.stroke();
red.closePath();
yellow.beginPath();
yellow.arc(95, 150, 40, 0, 2 * Math.PI);
yellow.fillStyle = 'grey';
yellow.fill();
yellow.stroke();
yellow.closePath();
green.beginPath();
green.arc(95, 250, 40, 0, 2 * Math.PI);
green.fillStyle = 'grey';
green.fill();
green.stroke();
green.closePath();
// Turns the top light red and other two lights stay grey
function redLight()
var canvas = document.getElementById("myCanvas");
var red = canvas.getContext("2d");
red.beginPath();
red.arc(95, 50, 40, 0, 2 * Math.PI);
red.fillStyle = 'red';
red.fill();
red.stroke();
red.closePath();
yellow.beginPath();
yellow.arc(95, 150, 40, 0, 2 * Math.PI);
yellow.fillStyle = 'grey';
yellow.fill();
yellow.stroke();
yellow.closePath();
green.beginPath();
green.arc(95, 250, 40, 0, 2 * Math.PI);
green.fillStyle = 'grey';
green.fill();
green.stroke();
green.closePath();
// Turns the middle light yellow and the other two remain grey
function yellowLight()
var canvas = document.getElementById("myCanvas");
var yellow = canvas.getContext("2d");
red.beginPath();
red.arc(95, 50, 40, 0, 2 * Math.PI);
red.fillStyle = 'grey';
red.fill();
red.stroke();
red.closePath();
yellow.beginPath();
yellow.arc(95, 150, 40, 0, 2 * Math.PI);
yellow.fillStyle = 'lightyellow';
yellow.fill();
yellow.stroke();
yellow.closePath();
green.beginPath();
green.arc(95, 250, 40, 0, 2 * Math.PI);
green.fillStyle = 'grey';
green.fill();
green.stroke();
green.closePath();
// Turns the bottom light green and the other two remain grey
function greenLight()
var canvas = document.getElementById("myCanvas");
var green = canvas.getContext("2d");
red.beginPath();
red.arc(95, 50, 40, 0, 2 * Math.PI);
red.fillStyle = 'grey';
red.fill();
red.stroke();
red.closePath();
yellow.beginPath();
yellow.arc(95, 150, 40, 0, 2 * Math.PI);
yellow.fillStyle = 'grey';
yellow.fill();
yellow.stroke();
yellow.closePath();
green.beginPath();
green.arc(95, 250, 40, 0, 2 * Math.PI);
green.fillStyle = 'lightgreen';
green.fill();
green.stroke();
green.closePath();
<canvas id="myCanvas" width="250" height="300" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas><br/>
<p><button id="button" onclick="commpnFunc();">Red Light!</button></p>var gblVal = 0;
var canvas = document.getElementById("myCanvas");
var red = canvas.getContext("2d");
var yellow = canvas.getContext("2d");
var green = canvas.getContext("2d");
red.beginPath();
red.arc(95, 50, 40, 0, 2 * Math.PI);
red.fillStyle = 'grey';
red.fill();
red.stroke();
red.closePath();
yellow.beginPath();
yellow.arc(95, 150, 40, 0, 2 * Math.PI);
yellow.fillStyle = 'grey';
yellow.fill();
yellow.stroke();
yellow.closePath();
green.beginPath();
green.arc(95, 250, 40, 0, 2 * Math.PI);
green.fillStyle = 'grey';
green.fill();
green.stroke();
green.closePath();
function commpnFunc()
if (gblVal >= 0 && gblVal < 3)
gblVal = gblVal + 1;
else
gblVal = 0;
if (gblVal == 1)
redLight();
if (gblVal == 2)
yellowLight();
if (gblVal == 3)
greenLight();
if (gblVal == 0)
var red = canvas.getContext("2d");
var yellow = canvas.getContext("2d");
var green = canvas.getContext("2d");
red.beginPath();
red.arc(95, 50, 40, 0, 2 * Math.PI);
red.fillStyle = 'grey';
red.fill();
red.stroke();
red.closePath();
yellow.beginPath();
yellow.arc(95, 150, 40, 0, 2 * Math.PI);
yellow.fillStyle = 'grey';
yellow.fill();
yellow.stroke();
yellow.closePath();
green.beginPath();
green.arc(95, 250, 40, 0, 2 * Math.PI);
green.fillStyle = 'grey';
green.fill();
green.stroke();
green.closePath();
// Turns the top light red and other two lights stay grey
function redLight()
var canvas = document.getElementById("myCanvas");
var red = canvas.getContext("2d");
red.beginPath();
red.arc(95, 50, 40, 0, 2 * Math.PI);
red.fillStyle = 'red';
red.fill();
red.stroke();
red.closePath();
yellow.beginPath();
yellow.arc(95, 150, 40, 0, 2 * Math.PI);
yellow.fillStyle = 'grey';
yellow.fill();
yellow.stroke();
yellow.closePath();
green.beginPath();
green.arc(95, 250, 40, 0, 2 * Math.PI);
green.fillStyle = 'grey';
green.fill();
green.stroke();
green.closePath();
// Turns the middle light yellow and the other two remain grey
function yellowLight()
var canvas = document.getElementById("myCanvas");
var yellow = canvas.getContext("2d");
red.beginPath();
red.arc(95, 50, 40, 0, 2 * Math.PI);
red.fillStyle = 'grey';
red.fill();
red.stroke();
red.closePath();
yellow.beginPath();
yellow.arc(95, 150, 40, 0, 2 * Math.PI);
yellow.fillStyle = 'lightyellow';
yellow.fill();
yellow.stroke();
yellow.closePath();
green.beginPath();
green.arc(95, 250, 40, 0, 2 * Math.PI);
green.fillStyle = 'grey';
green.fill();
green.stroke();
green.closePath();
// Turns the bottom light green and the other two remain grey
function greenLight()
var canvas = document.getElementById("myCanvas");
var green = canvas.getContext("2d");
red.beginPath();
red.arc(95, 50, 40, 0, 2 * Math.PI);
red.fillStyle = 'grey';
red.fill();
red.stroke();
red.closePath();
yellow.beginPath();
yellow.arc(95, 150, 40, 0, 2 * Math.PI);
yellow.fillStyle = 'grey';
yellow.fill();
yellow.stroke();
yellow.closePath();
green.beginPath();
green.arc(95, 250, 40, 0, 2 * Math.PI);
green.fillStyle = 'lightgreen';
green.fill();
green.stroke();
green.closePath();
<canvas id="myCanvas" width="250" height="300" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas><br/>
<p><button id="button" onclick="commpnFunc();">Red Light!</button></p>edited Nov 11 at 8:34
mplungjan
86.6k20122181
answered Nov 11 at 8:14
Neeraj Dwivedi
726
edited Nov 11 at 8:34
mplungjan
86.6k20122181
edited Nov 11 at 8:34
mplungjan
86.6k20122181
edited Nov 11 at 8:34
mplungjan
86.6k20122181
86.6k20122181
answered Nov 11 at 8:14
Neeraj Dwivedi
726
answered Nov 11 at 8:14
Neeraj Dwivedi
726
answered Nov 11 at 8:14
Neeraj Dwivedi
726
726
This is horribly ineffective. Have ONE function to change the lights
– mplungjan
Nov 11 at 8:34
add a comment |
This is horribly ineffective. Have ONE function to change the lights
– mplungjan
Nov 11 at 8:34
This is horribly ineffective. Have ONE function to change the lights
– mplungjan
Nov 11 at 8:34
This is horribly ineffective. Have ONE function to change the lights
– mplungjan
Nov 11 at 8:34
add a comment |
0
DRY - Don't Repeat Yourself
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var pos =
"red": 50,
"yellow": 150,
"green": 250
;
var colors = Object.keys(pos);
var cnt = 0;
function drawLight(color, on)
ctx.beginPath();
ctx.arc(95, pos[color], 40, 0, 2 * Math.PI);
ctx.fillStyle = on ? color : 'grey';
ctx.fill();
ctx.stroke();
ctx.closePath();
document.getElementById("button").addEventListener("click", changeLight);
function changeLight( )
colors.forEach(function(color, i)
drawLight(color, cnt==i);
);
document.getElementById("button").innerHTML = colors[cnt]
changeLight();<canvas id="myCanvas" width="250" height="300" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
<br/>Three buttons corresponding to the different lights on a traffic light
<p>
<button id="button" ">Change!</button></p>answered Nov 11 at 8:03
mplungjan
86.6k20122181
add a comment |
0
DRY - Don't Repeat Yourself
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var pos =
"red": 50,
"yellow": 150,
"green": 250
;
var colors = Object.keys(pos);
var cnt = 0;
function drawLight(color, on)
ctx.beginPath();
ctx.arc(95, pos[color], 40, 0, 2 * Math.PI);
ctx.fillStyle = on ? color : 'grey';
ctx.fill();
ctx.stroke();
ctx.closePath();
document.getElementById("button").addEventListener("click", changeLight);
function changeLight( )
colors.forEach(function(color, i)
drawLight(color, cnt==i);
);
document.getElementById("button").innerHTML = colors[cnt]
changeLight();<canvas id="myCanvas" width="250" height="300" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
<br/>Three buttons corresponding to the different lights on a traffic light
<p>
<button id="button" ">Change!</button></p>answered Nov 11 at 8:03
mplungjan
86.6k20122181
add a comment |
0
0
0
DRY - Don't Repeat Yourself
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var pos =
"red": 50,
"yellow": 150,
"green": 250
;
var colors = Object.keys(pos);
var cnt = 0;
function drawLight(color, on)
ctx.beginPath();
ctx.arc(95, pos[color], 40, 0, 2 * Math.PI);
ctx.fillStyle = on ? color : 'grey';
ctx.fill();
ctx.stroke();
ctx.closePath();
document.getElementById("button").addEventListener("click", changeLight);
function changeLight( )
colors.forEach(function(color, i)
drawLight(color, cnt==i);
);
document.getElementById("button").innerHTML = colors[cnt]
changeLight();<canvas id="myCanvas" width="250" height="300" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
<br/>Three buttons corresponding to the different lights on a traffic light
<p>
<button id="button" ">Change!</button></p>answered Nov 11 at 8:03
mplungjan
86.6k20122181
DRY - Don't Repeat Yourself
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var pos =
"red": 50,
"yellow": 150,
"green": 250
;
var colors = Object.keys(pos);
var cnt = 0;
function drawLight(color, on)
ctx.beginPath();
ctx.arc(95, pos[color], 40, 0, 2 * Math.PI);
ctx.fillStyle = on ? color : 'grey';
ctx.fill();
ctx.stroke();
ctx.closePath();
document.getElementById("button").addEventListener("click", changeLight);
function changeLight( )
colors.forEach(function(color, i)
drawLight(color, cnt==i);
);
document.getElementById("button").innerHTML = colors[cnt]
changeLight();<canvas id="myCanvas" width="250" height="300" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
<br/>Three buttons corresponding to the different lights on a traffic light
<p>
<button id="button" ">Change!</button></p>var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var pos =
"red": 50,
"yellow": 150,
"green": 250
;
var colors = Object.keys(pos);
var cnt = 0;
function drawLight(color, on)
ctx.beginPath();
ctx.arc(95, pos[color], 40, 0, 2 * Math.PI);
ctx.fillStyle = on ? color : 'grey';
ctx.fill();
ctx.stroke();
ctx.closePath();
document.getElementById("button").addEventListener("click", changeLight);
function changeLight( )
colors.forEach(function(color, i)
drawLight(color, cnt==i);
);
document.getElementById("button").innerHTML = colors[cnt]
changeLight();<canvas id="myCanvas" width="250" height="300" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
<br/>Three buttons corresponding to the different lights on a traffic light
<p>
<button id="button" ">Change!</button></p>var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var pos =
"red": 50,
"yellow": 150,
"green": 250
;
var colors = Object.keys(pos);
var cnt = 0;
function drawLight(color, on)
ctx.beginPath();
ctx.arc(95, pos[color], 40, 0, 2 * Math.PI);
ctx.fillStyle = on ? color : 'grey';
ctx.fill();
ctx.stroke();
ctx.closePath();
document.getElementById("button").addEventListener("click", changeLight);
function changeLight( )
colors.forEach(function(color, i)
drawLight(color, cnt==i);
);
document.getElementById("button").innerHTML = colors[cnt]
changeLight();<canvas id="myCanvas" width="250" height="300" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
<br/>Three buttons corresponding to the different lights on a traffic light
<p>
<button id="button" ">Change!</button></p>answered Nov 11 at 8:03
mplungjan
86.6k20122181
edited Nov 11 at 9:39
answered Nov 11 at 8:03
mplungjan
86.6k20122181
answered Nov 11 at 8:03
mplungjan
86.6k20122181
answered Nov 11 at 8:03
mplungjan
86.6k20122181
86.6k20122181
add a comment |
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53246787%2fcanvas-javascript-one-button-multiple-functions%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
I need one button that performs all three functions.
– user7123308
Nov 11 at 7:53