• View our reviews on Hot Scripts
  • JS Tutorial

Recent Comments

Powered by Disqus

Back to articles

Emulate events on canvas objects

Canvas Events class extends canvas object to help to attach mouse events to different shapes with minimal javascript code modifications

It supports all native canvas context methods. The way it works: canvas context methods that perform actual drawing (stroke, fill, strokeRect, fillRect, drawImage) return a shape object to which you can attach events

Currently it supports click, dblclick, mouseover, mouseout, mousemove, mouseup and mousedown events.

Package contains canvas_events.js and canvas_events.packed.js (packed javascript) and seven example files:
  • simple_shape_example.html for simple rectangle example
  • transformed_shape_example.html for transformed rectangle example
  • complex_shape_example.html for path example
  • images_example.html for image example
  • arc_example.html for arc/circle example
  • multiple_shapes_example.html for example with multiple shapes
  • drag_and_drop_example.html.html for drag and drop example



Example codes

<p id='debug'></p>
<canvas id='canvas' width='800' height='600'></canvas>
<script src="./canvas_events.js" type="text/javascript"></script>
var ctx = new canvas_events("canvas");
ctx.fillStyle = "black";
var rect = ctx.fillRect(50, 50, 100, 100);
//stroke on mouse over
rect.addEvent("mouseover", function(e,args){
    this.strokeStyle = "red"; 
//return to default state on mouseout
rect.addEvent("mouseout", function(e,args){
//fill blue on mouse down
rect.addEvent("mousedown", function(e,args){
    this.fillStyle = "blue"; 
//fill red on mouse up
rect.addEvent("mouseup", function(e,args){
    this.fillStyle = "red"; 
//display click coordinates on click
rect.addEvent("click", function(e){
    var d = document.getElementById("debug"); 
    d.innerHTML = "<p>Clicked: " + e.elemX + " x " + e.elemY + "</p>";
//display all 4 points of a rectangle on double click
rect.addEvent("dblclick", function(e,a){
    alert("("+a[0].data[0]+";"+a[0].data[1]+"), ("
    +a[1].data[0]+";"+a[1].data[1]+"), ("
    +a[2].data[0]+";"+a[2].data[1]+"), ("
//display coordinates on mouse move
rect.addEvent("mousemove", function(e, args){
    var d = document.getElementById("debug"); 
    d.innerHTML = "<p>" + e.elemX + " x " + e.elemY + "</p>";

Examples in action

Example scripts provided with package in action:

Method list


Back to method list

Method namenew canvas_events(canvas)
DescriptionCreate Canvas Events instance and return canvas context
Input parameters

string or object canvas - if of canvas element or canvas element itself

Recreate shape

Back to method list

Method namerecreate(args, modX, modY)
DescriptionRecreates shape using paths (you only need to call this.fill() or this.stroke() to perform drawing)
Input parameters

point object args - object containing all points of a shape, it is a second argument that can be retrieved inside an event handler

int modX - value by which to modify all x coordinates of all shape points

int modY - value by which to modify all y coordinates of all shape points

Shape object - Add event

Back to method list

Method nameaddEvent(name, callback)
DescriptionAdds event to shape object. Shape objects are returned by canvas context methods, which perform actual drawing (for example: stroke, fill, strokeRect, fillRect, drawImage).
Input parameters

string name - name of event, currently supported events are: click, dblclick, mouseover, mouseout, mousemove, mouseup and mousedown

function callback - callback function which should be called on provided event. Callback function can receive two arguments:

  • mouse event object - with standard page and client properties and new elemX and elemY properties, which specify mouse position inside canvas element
  • point object - which contains all points of a shape and can be passed to recreate method to recreate the shape and then draw it using stroke or fill methods and any standard specified canvas styles

Latest changes

None for now

You may also be interested in:

Powered by

blog comments powered by Disqus