Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Add interaction example.

  • Loading branch information...
commit f66a81352b7a8579e9796d17be91df75bbae9560 1 parent 2d2a0a3
@wtaysom authored
Showing with 90 additions and 1 deletion.
  1. +15 −0 interaction.html
  2. +59 −0 interaction.js
  3. +16 −1 notes.md
View
15 interaction.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="utf-8">
+ <title>Canvas Interaction</title>
+</head>
+<body onkeydown="handleKey(event)" onkeyup="handleKey(event)">
+ <canvas id="canvas" width="480" height="320"
+ style="background-color: black;"
+ onmousedown="handleMouse(event)"
+ onmousemove="handleMouse(event)"
+ onmouseup="handleMouse(event)"></canvas>
+ <script src="interaction.js"></script>
+</body>
+</html>
View
59 interaction.js
@@ -0,0 +1,59 @@
+var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+
+var mouseDown = false;
+var mouseX = 0;
+var mouseY = 0;
+var key = 0;
+
+function handleMouse(event) {
+ mouseX = event.offsetX;
+ mouseY = event.offsetY;
+
+ if (event.type == 'mousedown') {
+ mouseDown = true;
+ } else if (event.type == 'mouseup') {
+ mouseDown = false;
+ }
+
+ redraw();
+}
+
+function handleKey(event) {
+ if (event.type == 'keydown') {
+ key = event.which;
+ }
+
+ // Disable navigation (e.g. delete key).
+ event.preventDefault();
+
+ redraw();
+}
+
+function redraw() {
+ ctx.clearRect(0, 0, canvas.width, canvas.height);
+ drawCursor();
+ drawLabel();
+}
+
+var cursorStartAngle = Math.PI;
+var cursorEndAngle = Math.PI * 1.75;
+function drawCursor() {
+ var radius = mouseDown ? 15 : 10;
+ ctx.beginPath();
+ ctx.arc(mouseX, mouseY, radius, cursorStartAngle, cursorEndAngle)
+ ctx.closePath();
+ ctx.fillStyle = 'white';
+ ctx.fill();
+}
+
+function drawLabel() {
+ var labelTypeface = 'Menlo';
+ var labelSize = 14;
+ var labelOffset = 3;
+ var text = mouseX+","+mouseY+" -- "+key+" "+String.fromCharCode(key);
+
+ ctx.font = labelSize+'pt '+labelTypeface;
+ ctx.fillStyle = 'white';
+ ctx.fillText(text, labelOffset, labelOffset + labelSize);
+}
View
17 notes.md
@@ -113,4 +113,19 @@ Feel free to email me or find me on Skype (username wtaysom) for more hints.
## Topics
-!! mouse events, libraries, parameter slider using [Dragdealer JS](http://code.ovidiu.ch/dragdealer/)
+Mouse events, keyboard events, libraries
+
+!! parameter slider using [Dragdealer JS](http://code.ovidiu.ch/dragdealer/)
+
+## Tools
+
+* DigitalColor Meter application to get a pixel level inspection of what's going on.
+* [keymaster.js](https://github.com/madrobby/keymaster) for nice keyboard handling.
+
+## Tutorials
+
+* [Canvas Mouse Tutorial](http://www.html5canvastutorials.com/advanced/html5-canvas-mouse-coordinates/) provides one way complete way to find mouse where the mouse is.
+
+## Example
+
+[BrowserQuest](https://hacks.mozilla.org/2012/03/browserquest/) is a demo massively multiplayer game.
Please sign in to comment.
Something went wrong with that request. Please try again.