Hi,
i have the problem to change the colour of the second object on the canvas. Here is my code :
<!DOCTYPE html>
<html>
<head>
<title>Canvas</title>
<style type="text/css">
body {
padding:100px;
background:#ffffff;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs.../jquery.min.js"></script>
<script type="text/javascript">
var canvas=null;
var context=null;
window.onload = function() {
canvas=document.getElementById("drawing");
context=canvas.getContext("2d");
context.beginPath(); //This initiates the border
context.rect(80,60,30,70);
context.fillStyle="#ffffff";
context.fill();
context.lineWidth=1; //This sets the width of the border
context.strokeStyle="#000000"; //This sets the color of the border
context.stroke();
canvas=document.getElementById("drawing");
context=canvas.getContext("2d");
context.beginPath(); //This initiates the border
context.rect(20,60,30,70);
context.fillStyle="#ffffff";
context.fill();
context.lineWidth=1; //This sets the width of the border
context.strokeStyle="#000000"; //This sets the color of the border
context.stroke();
}
function BlueRect () {
context.fillStyle="#701be0"; // This changes the rectangle to blue
context.fill();
context.strokeStyle="#000000";
context.stroke();
}
function GreenRect () {
context.fillStyle="#1be050"; // This function changes the rectangle to green
context.fill();
context.strokeStyle="#000000";
context.stroke();
}
function YellRect () {
context.fillStyle="#fcfc00"; // This function changes the rectangle to yellow
context.fill();
context.strokeStyle="#000000";
context.stroke();
}
function RedRect () {
context.fillStyle="#fc0d00";// This function changes the rectangle to red
context.fill();
context.strokeStyle="#000000";
context.stroke();
}
function ImgClr () {
context.clearRect(0,0, canvas.width, canvas.height); //This function clears the whole canvas area
}
</script>
<meta name="robots" content="noindex">
</head>
<body>
<p>Interactive Canvas</p>
<canvas id="drawing" style="" > </canvas>
<p>Click on the buttons below to change the color of the rectangle. </p>
1.Colour <input type="button" value="Blue" id="blue" onclick="BlueRect()" />
1.Colour <input type="button" value="Green" id="green" onclick="GreenRect()" />
1.Colour<input type="button" value="Yellow" id="yellow" onclick="YellRect()" />
1.Colour<input type="button" value="Red" id="red" onclick="RedRect()" />
1. Clear<input type="button" value="Click to clear canvas" id="clear" onclick="ImgClr()" />
<br><br><br>
2.Colour <input type="button" value="Blue" id="blue" onclick="BlueRect()" />
2.Colour <input type="button" value="Green" id="green" onclick="GreenRect()" />
2.Colour<input type="button" value="Yellow" id="yellow" onclick="YellRect()" />
2.Colour<input type="button" value="Red" id="red" onclick="RedRect()" />
2. Clear<input type="button" value="Click to clear canvas" id="clear" onclick="ImgClr()" />
</body>
</html>
Many Thanks for any Information!!
Michael
