Post
Ask Question

Working with Canvas Tag in HTML 5

Introduction 

 
The canvas element is part of HTML 5 and allows for dynamic, scriptable rendering of 2D shapes and bitmap images. It is a low level, procedural model that updates a bitmap and does not have a built-in scene graph.
 
In the following code, we drag and drop the circle in the clipping region. Before giving the code I want to discuss some terms I use in this code.
 

window.onload

 
Some scripts require that you run something immediately after the web page finishes loading. The normal way to do this is to add an onload attribute to the body tag.
 

Summary

 
An event handler for the load event of a window.
 

Syntax

 
window.onload = functionRef ()
functionRef is the handler function to be called when the window's load event fires.
 

AddEventListener

 
Despite that, it's already outdated, a lot of programmers are still using onClick, onChange and so … events in the tag's attributes and I actually find myself doing it sometimes as well. So I want to show you a nice and clean way of adding events to the objects/tags without implicitly declaring some action in the tag – sounds complicated but it's really not.
 

Summary

 
addEventListener() registers a single event listener on a single target. The event target may be a single node in a document, the document itself, a window, or an XMLHttpRequest.
 
To register more than one event listeners for the target use addEventListener() for the same target but with different event types or capture parameters.
 

Syntax

 target.addEventListener(type, listener, useCapture Optional ); 
target.addEventListener(type, listener, useCapture Optional [, aWantsUntrusted Non-standard ] ); // Mozilla only
 

where

 
type
 
A string representing the event type to listen for.
 
listener
 
The object that receives a notification when an event of the specified type occurs. This must be an object implementing the EventListener interface, or simply a JavaScript function.
 
useCapture [optional]
 
If true, useCapture indicates that the user wishes to initiate capture. After initiating capture, all events of the specified type will be dispatched to the registered listener before being dispatched to any EventTargets beneath it in the DOM tree. Events that are bubbling upward through the tree will not trigger a listener designated to use capture. See DOM Level 3 Events for a detailed explanation. Note that this parameter is not optional in all browser versions. If not specified, useCapture is false.
 
aWantsUntrusted Non-standard
 
If true, the event can be triggered by untrusted content.
 
code
  1. <html>  
  2.     <head>  
  3.         <script src="http://www.html5canvastutorials.com/libraries/kinetic-v3.3.0.js"></script>  
  4.         <script>  
  5.         window.onload = function () {  
  6.             var stage = new Kinetic.Stage("container", 378, 200);  
  7.             var draggingShape = undefined;  
  8.             var draggingRectOffsetX = 0;  
  9.             var draggingRectOffsetY = 0;  
  10.             // box  
  11.             var box = new Kinetic.Shape(function () {  
  12.                 var context = this.getContext();  
  13.                 context.beginPath();  
  14.                 context.rect(box._x, box._y, 800, 600);  
  15.                 context.fillStyle = "#ddd";  
  16.                 context.fill();  
  17.                 context.closePath();  
  18.             });  
  19.             box.addEventListener("mousedown", function () {  
  20.                 draggingShape = box;  
  21.                 var mousePos = stage.getMousePos();  
  22.                 draggingRectOffsetX = mousePos.x - box._x;  
  23.                 draggingRectOffsetY = mousePos.y - box._y;  
  24.             });  
  25.             box.addEventListener("mouseover", function () {  
  26.                 document.body.style.cursor = "pointer";  
  27.             });  
  28.             box.addEventListener("mouseout", function () {  
  29.                 document.body.style.cursor = "default";  
  30.             });  
  31.             box._x = 100;  
  32.             box._y = 50;  
  33.             stage.add(box);  
  34.             // circle  
  35.             var circle = new Kinetic.Shape(function () {  
  36.                 var context = this.getContext();  
  37.                 // draw clipping rectangle  
  38.                 context.beginPath();  
  39.                 context.rect(box._x, box._y, 300, 200);  
  40.                 context.clip();  
  41.                 // draw circle  
  42.                 context.beginPath();  
  43.                 context.arc(circle._x, circle._y, 70, 0, 2 * Math.PI, false);  
  44.                 context.fillStyle = "red";  
  45.                 context.fill();  
  46.                 context.closePath();  
  47.             });  
  48.             circle.addEventListener("mousedown", function () {  
  49.                 draggingShape = circle;  
  50.                 var mousePos = stage.getMousePos();  
  51.                 draggingRectOffsetX = mousePos.x - circle._x;  
  52.                 draggingRectOffsetY = mousePos.y - circle._y;  
  53.             });  
  54.             circle.addEventListener("mouseover", function () {  
  55.                 document.body.style.cursor = "pointer";  
  56.             });  
  57.             circle.addEventListener("mouseout", function () {  
  58.                 document.body.style.cursor = "default";  
  59.             });  
  60.             stage.add(circle);  
  61.             circle._x = 300;  
  62.             circle._y = 50;  
  63.             stage.draw();  
  64.             stage.addEventListener("mouseout", function () {  
  65.                 draggingShape = undefined;  
  66.             }, false);  
  67.             stage.addEventListener("mousemove", function () {  
  68.                 var mousePos = stage.getMousePos();  
  69.                 if (draggingShape) {  
  70.                     draggingShape._x = mousePos.x - draggingRectOffsetX;  
  71.                     draggingShape._y = mousePos.y - draggingRectOffsetY;  
  72.                      stage.draw();  
  73.                }  
  74.            }, false);  
  75.              stage.addEventListener("mouseup", function () {  
  76.                 draggingShape = undefined;  
  77.             });  
  78.         };  
  79.     </script>  
  80.     </head>  
  81.     <body onmousedown="return false;">  
  82.         <div id="container"></div>  
  83.     </body>  
  84. </html>  
Output
 
canvas22.jpg


Similar Articles