# How do I implement pixel-exact collision server-side?

Recently I made a 2D offline game with HTML5 Canvas and JavaScript. I'm detecting collisions by first checking whether image bounding boxes overlap. If they do, I check against the bounding boxes, to see if there are any pixels that exist in the same location for both images.

I learned the technique from this tutorial (YouTube).

Now I'm making a multi-player version of the game, in a client-server configuration. I've decided to have the server handle all physics, including collision.

However, I'm not sure how to implement that. Since the images are drawn client-side, the server cannot access image's data to do the pixel collision tests. I can make bounding boxes on the server side, but how do I detect pixel collisions?

Tech details: I intend to write the server in node.js, using either CouchDB or MongoDB as my database.

• You could reuse your client-side collision-detection code with the node-canvas module.
– Cory
Mar 19, 2014 at 7:32

Image loading and manipulation libraries like ImageMagick and GraphicsMagick tends to have bindings to pretty much any platform in existence, and node.js is not an exception with the gm and imagemagick modules.
Evaluate the libraries and the node-canvas library mentioned in another answer and see what works out. node-canvas has the benefit of being API-similiar to HTML5 canvas, while gm has a richer set of image processing functions.