Post
Ask Question

HTML5 Canvas Disable Event Listener by Name

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 the 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
  1. window.onload = function(){  
  2.             var stage = new Kinetic.Stage("container", 578, 200);  
  3.             var circle = new Kinetic.Shape(function(){  
  4.                 var canvas = this.getCanvas();  
  5.                 var context = this.getContext();  
  6.                 context.beginPath();  
  7.                 context.arc(canvas.width / 2, canvas.height / 2, 70, 0, Math.PI * 2, true);  
  8.                 context.fillStyle = "#FF00FF";  
  9.                 context.fill();  
  10.                 context.lineWidth = 4;  
  11.                 context.stroke();  
  12.           });  
circle.gif
 
Step3:  Add Event Listener and set on_click event on a circle.
 
Code
  1. circle.addEventListener("click.event1", function(){  
  2.                 alert("First Listener");  
  3.             });  
  4.             circle.addEventListener("click.event2", function(){  
  5.                 alert("Second Listener");  
  6.             });  
  7.             stage.add(circle);  
  8.             document.getElementById("remove1").addEventListener("click", function(){  
  9.                 circle.removeEventListener("click.event1");  
  10.                 alert("First onclick removed");  
  11.             }, false);  
  12.             document.getElementById("remove2").addEventListener("click", function(){  
  13.                 circle.removeEventListener("click.event2");  
  14.                 alert("Second onclick removed");  
  15.             }, false);  
  16.             document.getElementById("removeAll").addEventListener("click", function(){  
  17.                 circle.removeEventListener("click");  
  18.                 alert("All onclicks removed");  
  19. }, false);  
1.gif
 
2.gif
 
Step4: Set button name that we have used to perform the action.
 
Code
  1. <body onmousedown="return false;">  
  2.     <div id="container"></div>  
  3.     <div id="buttons">  
  4.         <button id="remove1">  
  5.          Disable First Listener   
  6.         </button>  
  7.         <button id="remove2">  
  8.             Disable Second Listener  
  9.         </button>  
  10.         <button id="removeAll">  
  11.            Disable All Listeners  
  12.         </button>  
  13.     </div>  
  14. </body>  
disable.gif
 
Step5: Perform the complete action on HTML5, which is:
 
Code
  1. <head>  
  2.     <script src="http://www.html5canvastutorials.com/libraries/kinetic-v3.2.0.js"></script>  
  3.     <script>  
  4.         function writeMessage(stage, message){  
  5.             var context = stage.getContext();  
  6.             stage.clear();  
  7.             context.font = "18pt Calibri";  
  8.             context.fillStyle = "black";  
  9.             context.fillText(message, 10, 25);  
  10.         }  
  11.         window.onload = function(){  
  12.             var stage = new Kinetic.Stage("container", 578, 200);  
  13.             var circle = new Kinetic.Shape(function(){  
  14.                 var canvas = this.getCanvas();  
  15.                 var context = this.getContext();  
  16.                 context.beginPath();  
  17.                 context.arc(canvas.width / 2, canvas.height / 2, 70, 0, Math.PI * 2, true);  
  18.                 context.fillStyle = "#FF00FF";  
  19.                 context.fill();  
  20.                 context.lineWidth = 4;  
  21.                 context.stroke();  
  22.             });  
  23.             circle.addEventListener("click.event1", function(){  
  24.                 alert("First Listener");  
  25.             });  
  26.             circle.addEventListener("click.event2", function(){  
  27.                 alert("Second Listener");  
  28.             });  
  29.             stage.add(circle);  
  30.             document.getElementById("remove1").addEventListener("click", function(){  
  31.                 circle.removeEventListener("click.event1");  
  32.                 alert("First onclick removed");  
  33.             }, false);  
  34.             document.getElementById("remove2").addEventListener("click", function(){  
  35.                 circle.removeEventListener("click.event2");  
  36.                 alert("Second onclick removed");  
  37.             }, false);  
  38.             document.getElementById("removeAll").addEventListener("click", function(){  
  39.                 circle.removeEventListener("click");  
  40.                 alert("All onclicks removed");  
  41.             }, false);\  
  42.         };  
  43.     </script>  
  44. </head>  
  45. <body onmousedown="return false;">  
  46.     <div id="container"></div>  
  47.     <div id="buttons">  
  48.         <button id="remove1">  
  49.          Disable First Listener   
  50.         </button>  
  51.         <button id="remove2">  
  52.             Disable Second Listener  
  53.         </button>  
  54.         <button id="removeAll">  
  55.            Disable All Listeners  
  56.         </button>  
  57.     </div>  
  58. </body>  
Output:
 
output.gif
 
output2.gif
 
output3.gif


Similar Articles