KnowledgeHub
Questions
Tags
Users
Search
Alex Rivera
|
Logout
Edit Question
Title
Body
I want to add an onclick , onmouseover and an onmouseout events to individual shapes in a canvas element. I have tried doing this with SVG in different ways and found no single method will work in all the major browsers. Maybe, is there a simple way to add an onclick and probably other events to canvas shapes? Can someone please show me how to add an onclick ? Here is my code: canvas { background:gainsboro; border:10px ridge green; } <canvas id="Canvas1"></canvas> var c=document.getElementById("Canvas1"); var ctx=c.getContext("2d"); ctx.fillStyle="blue"; ctx.fillRect(10,10,60,60); var ctx=c.getContext("2d"); ctx.fillStyle="red"; ctx.fillRect(80,60,60,60); // these need an onclick to fire them up. How do I add the onclick function blue() { alert("hello from blue square") } function red() { alert("hello from red square") }
Tags (comma-separated)
Save Edits
Cancel