File: simple_shape_example.html

Recommend this page to a friend!
  Classes of Arturs Sosins   Canvas Events   simple_shape_example.html   Download  
File: simple_shape_example.html
Role: Example script
Content type: text/plain
Description: Simple example with all events
Class: Canvas Events
Emulate mouse events on canvas elements
Author: By
Last change:
Date: 12 years ago
Size: 2,321 bytes


Class file image Download
<!-- /************************************************************* * This script is developed by Arturs Sosins aka ar2rsawseen, * Feel free to distribute and modify code, but keep reference to its creator * * Canvas Events class extends canvas object to help to attach mouse events * to different shapes with minimal javascript code modifications. * Canvas context methods that perform actual drawing like * stroke, fill, strokeRect, fillRect, drawImage * return a shape object to which you can attach events * * For more information, examples and online documentation visit: * **************************************************************/ --> <html> <head> </head> <body> <p id='debug'></p> <canvas id='canvas' width='800' height='600'></canvas> <script src="./canvas_events.packed.js" type="text/javascript"></script> <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"; this.recreate(args); this.stroke(); }); //return to default state on mouseout rect.addEvent("mouseout", function(e,args){ this.clearRect(0,0,800,600); this.recreate(args); this.fill(); }); //fill blue on mouse down rect.addEvent("mousedown", function(e,args){ this.fillStyle = "blue"; this.recreate(args); this.fill(); }); //fill red on mouse up rect.addEvent("mouseup", function(e,args){ this.fillStyle = "red"; this.recreate(args);this.fill(); }); //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]+"), (" +a[3].data[0]+";"+a[3].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>"; }); </script>