Introduction
This is a simple application in HTML 5 that
performs a HTML5 Canvas disable Event Listener by Name. We know
that HTML5 is an advanced version of HTML that can be used to develop
3D animated applications. The new feature of HTML5 is the canvas element for
drawing. The video and audio elements for media playback. Better support for
local offline storage. HTML5 will be the new standard for HTML, XHTML, and the
HTML DOM. The previous version of HTML is from 1999. The web has changed a lot
since then. HTML5 is still a work in progress. However, most modern browsers have
some HTML5 support. HTML5 is a cooperation between the World Wide Web Consortium
(W3C) and the Web Hypertext Application Technology Working Group.
Step1: First open the HTML editor.
- Open start->notepad.
- The name of editor is "Tom".
![Untitled-1.gif]()
Step2: First we create the "window.onload"
function. In an onload function we define the size of the canvas
and set the color.
Code
window.onload =
function(){
var stage =
new Kinetic.Stage("container", 578,
200);
var circle =
new Kinetic.Shape(function(){
var canvas =
this.getCanvas();
var context =
this.getContext();
context.beginPath();
context.arc(canvas.width / 2, canvas.height / 2, 70, 0, Math.PI
* 2, true);
context.fillStyle = "#FF00FF";
context.fill();
context.lineWidth = 4;
context.stroke();
});
![circle.gif]()
Step3: Add
Event Listener and set on_click event on a circle.
Code
circle.addEventListener("click.event1",
function(){
alert("First Listener");
});
circle.addEventListener("click.event2",
function(){
alert("Second Listener");
});
stage.add(circle);
document.getElementById("remove1").addEventListener("click",
function(){
circle.removeEventListener("click.event1");
alert("First onclick removed");
}, false);
document.getElementById("remove2").addEventListener("click",
function(){
circle.removeEventListener("click.event2");
alert("Second onclick removed");
}, false);
document.getElementById("removeAll").addEventListener("click",
function(){
circle.removeEventListener("click");
alert("All onclicks removed");
}, false);
![1.gif]()
![2.gif]()
Step4: Set button
name that we have used to perform the action.
Code
<body
onmousedown="return
false;">
<div id="container">
</div>
<div
id="buttons">
<button
id="remove1">
Disable First Listener
</button>
<button
id="remove2">
Disable Second Listener
</button>
<button
id="removeAll">
Disable All Listeners
</button>
</div>
</body>
![disable.gif]()
Step5: Perform the
complete action on HTML5, which is:
Code
<head>
<script
src="http://www.html5canvastutorials.com/libraries/kinetic-v3.2.0.js">
</script>
<script>
function writeMessage(stage,
message){
var context = stage.getContext();
stage.clear();
context.font = "18pt Calibri";
context.fillStyle = "black";
context.fillText(message, 10, 25);
}
window.onload = function(){
var stage =
new Kinetic.Stage("container", 578,
200);
var circle =
new Kinetic.Shape(function(){
var canvas =
this.getCanvas();
var context =
this.getContext();
context.beginPath();
context.arc(canvas.width / 2, canvas.height / 2, 70, 0, Math.PI
* 2, true);
context.fillStyle = "#FF00FF";
context.fill();
context.lineWidth = 4;
context.stroke();
});
circle.addEventListener("click.event1",
function(){
alert("First Listener");
});
circle.addEventListener("click.event2",
function(){
alert("Second Listener");
});
stage.add(circle);
document.getElementById("remove1").addEventListener("click",
function(){
circle.removeEventListener("click.event1");
alert("First onclick removed");
}, false);
document.getElementById("remove2").addEventListener("click",
function(){
circle.removeEventListener("click.event2");
alert("Second onclick removed");
}, false);
document.getElementById("removeAll").addEventListener("click",
function(){
circle.removeEventListener("click");
alert("All onclicks removed");
}, false);\
};
</script>
</head>
<body
onmousedown="return
false;">
<div
id="container">
</div>
<div
id="buttons">
<button
id="remove1">
Disable First Listener
</button>
<button
id="remove2">
Disable Second Listener
</button>
<button
id="removeAll">
Disable All Listeners
</button>
</div>
</body>
Output:
![output.gif]()
![output2.gif]()
![output3.gif]()