Skip to content

Latest commit

 

History

History
118 lines (83 loc) · 4.25 KB

README.md

File metadata and controls

118 lines (83 loc) · 4.25 KB
Raw

canvas-utils

NPM version Build Status devDependency Status Coverage Status

Utility functions for working with the HTML5 canvas

functions

var canvasUtils = require('canvas-utils');

canvasUtils.convertEventCoords(e, canvas)

This function returns the coordinates of mouse events relative to a DOM element. For example a Canvas.

e is a MouseEvent.

canvas is a a DOM element.

returns an Object with a x and y property representing the pixel on the canvas that the event was fired on.

canvas.addEventListener('click', function(event) {
  var xy = convertEventCoords(event, canvas);
  canvas.getContext('2d').fillRect(xy.x,xy.y,10,10)
});

This is a little verbose. For a nicer way to do this have a look at the CanvasEventEmitter

canvasUtils.rotateContextAt(ctx, x, y, rotation)

Rotates a context around a point.

ctx is a CanvasRenderingContext2D. (That's the thing you get when you do canvas.getContext('2d'))

x is the x-coordinate of the rotation.

y is the y-coordinate.

rotation is the rotation in radians.

Returns the ctx passed in.

canvasUtils.radiansToDegrees(radians)

Converts radiansto degrees.

canvasUtils.degreesToRadians(degrees)

Converts degreesto radians.

CanvasEventEmitter

var createCanvasEventEmitter = require('canvas-utils').createCanvasEventEmitter;

var cee = createCanvasEventEmitter(target, eventSource = window.document);

target is the canvas for which events should be emitted.

eventSource is the element where the event listeners are attached. It defaults to window.document.

Demo for the CanvasEventEmitter on requirebin

Events

A CanvasEventEmitter is a jvent EventEmitter. jvent is a small EventEmitter that behaves pretty much like a standard node EventEmitter. It emits the following events:

Events with synonyms
mouseup
mousedown
mousemove
mouseover, mousein
mouseleave, mouseout
click
leftclick
contextmenu, rightclick

The event object you get for all of these looks like this:

Property Description
x the x coordinate of the event relative to the canvas
y the y coordinate of the event relative to the canvas
target the canvas the event belongs to (The target you passed into the constructor)
event the original DOM event emitted on the eventSource
button the button property from the event
preventDefault a function that calles preventDefault on the event 
cee.on('click',function(e){
  e.preventDefault();
  ctx.fillRect(e.x-5,e.y-5,10,10);
});

Release History

  • 2018-02-16   v0.8.0   Use jvent and add synonyms for some events.
  • 2018-02-08   v0.7.0   Add imageDataHelper.
  • 2015-03-07   v0.6.0   Is now written in ES6.
  • 2014-11-02   v0.5.0   Add radiansToDegrees and degreesToRadians.
  • 2014-10-13   v0.4.0   Add mouseover and mouseout events.
  • 2014-10-06   v0.3.2   Fix README typo.
  • 2014-10-06   v0.3.1   Fix e.button and e.preventDefault().
  • 2014-10-06   v0.3.0   Improve convertEventCoords.
  • 2014-09-26   v0.2.0   Add contextmenu event.
  • 2014-09-12   v0.1.0   Add CanvasEventEmitter.
  • 2014-08-16   v0.0.1   Initial version.