Reader Level:

Working with Canvas Tag in HTML 5

By Akshay Teotia on Dec 31 2011
The canvas element is part of HTML5 and allows for dynamic, scriptable rendering of 2D shapes and bitmap images.
    • Like
    • Love It
    • Awesome
    • Interesting
    • It's Okay
    • Thumbs Down
  • 9.1k
  • 0

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.


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.


An event handler for the load event of a window .


window.onload = functionRef ()

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


Despite that it's already outdated, a lot of programmers are still using onClick, onChange and so … events in the tags 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.


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.


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



A string representing the event type to listen for.


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 which 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.


    <script src="">
        window.onload = function () {
            var stage = new Kinetic.Stage("container", 378, 200);
            var draggingShape = undefined;
            var draggingRectOffsetX = 0;
            var draggingRectOffsetY = 0;
            // box
            var box = new Kinetic.Shape(function () {
                var context = this.getContext();
                context.rect(box._x, box._y, 800, 600);
                context.fillStyle = "#ddd";
            box.addEventListener("mousedown", function () {
                draggingShape = box;
                var mousePos = stage.getMousePos();
                draggingRectOffsetX = mousePos.x - box._x;
                draggingRectOffsetY = mousePos.y - box._y;
            box.addEventListener("mouseover", function () {
       = "pointer";
            box.addEventListener("mouseout", function () {
       = "default";
            box._x = 100;
            box._y = 50;
            // circle
            var circle = new Kinetic.Shape(function () {
                var context = this.getContext();
                // draw clipping rectangle
                context.rect(box._x, box._y, 300, 200);
                // draw circle
                context.arc(circle._x, circle._y, 70, 0, 2 * Math.PI, false);
                context.fillStyle = "red";
            circle.addEventListener("mousedown", function () {
                draggingShape = circle;
                var mousePos = stage.getMousePos();
                draggingRectOffsetX = mousePos.x - circle._x;
                draggingRectOffsetY = mousePos.y - circle._y;
            circle.addEventListener("mouseover", function () {
       = "pointer";
            circle.addEventListener("mouseout", function () {
       = "default";
            circle._x = 300;
            circle._y = 50;
            stage.addEventListener("mouseout", function () {
                draggingShape = undefined;
            }, false);
            stage.addEventListener("mousemove", function () {
                var mousePos = stage.getMousePos();
                if (draggingShape) {
                    draggingShape._x = mousePos.x - draggingRectOffsetX;
                    draggingShape._y = mousePos.y - draggingRectOffsetY;
           }, false);
             stage.addEventListener("mouseup", function () {
                draggingShape = undefined;
body onmousedown="return false;">
    <div id="container">