lakshmananindia Posted March 23, 2009 Share Posted March 23, 2009 Hi firends, I'm in the process of creating a calendar to mark the attendance in javascript. I created a calender with the help of table. I also need to mark the leave ( forenoon or afternoon or wholeday). So I added 3 more buttons inside every rows one for forenoon and one for afternoon and one for the whole day. When the user click's on a button, the color will be changed to some other color to indicate him that he selected this button. But now I don't want buttons to be there and I need images. I used the following canvas code to draw the image. <html> <head> <script type="text/javascript"> function draw(){ var canvas = document.getElementById('tutorial'); if (canvas.getContext){ var ctx = canvas.getContext('2d'); ctx.fillStyle="orange"; ctx.beginPath(); ctx.moveTo(0,0); ctx.lineTo(0,100); ctx.lineTo(100,0); ctx.fill(); ctx.fillStyle="red"; ctx.beginPath(); ctx.moveTo(100,100); ctx.lineTo(100,0); ctx.lineTo(0,100); ctx.fill(); } } </script> <style type="text/css"> canvas { border: 1px solid black; } </style> </head> <body onload="draw()"> <canvas id="tutorial" width="100" height="100"></canvas> </body> </html> Now I need to change the color of the triangles. If the used clicks orange color triangle I need to change the color into green. But now the whole canvas color is changing. I need to change only the color for that orange triangle. Please help me. If this is not the right way, please suggest me some more ways to achieve my goal. Link to comment https://forums.phpfreaks.com/topic/150672-javascript-attendence-calendar/ Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.