I need to detect collisions in my HTML5 canvas (I'm using the KineticJS library), and thus far have used my own methods to detect if a certain point is within a certain shape.
I recently noticed that there's a method from the Container class, getIntersections(point) which should do exactly what I want. However it seems to be EXTREMELY slow, so when moving an object on the canvas and using the method for every new position, it becomes unusable.
Has anyone used this method for collision detection? If not, are there any tips on collision detection in a HTML5 canvas? I'm having trouble detecting if a point is inside a rectangle that is rotated by a certain amount of degrees.
https://github.com/ericdrowell/KineticJS/issues/150
This is exactly what you need.
okay, to be clear, there are two ways to get an intersected shape based on mouse position:
1) getIntersection() - preferred 2) getIntersections() - very slow, and should be used for special situations
the getIntersection() method is blazingly fast, and returns an object containing information about the intersection point, such as a reference to a KineticJS shape if one is there, or pixel color information.
the getIntersections() method does the same thing, except that it iterates through and redraws every single node in the stage in order to return a collection of intersections that may have been layered on top of eachother.
99 times out of a 100, you're probably just interested in the visible intersected node which is at the top of nodes beneath it.
I've actually considered removing the getIntersections() method entirely, but haven't because there are some special situations when you actually do need a collection of intersections. At this time, I haven't been able to find a way to speed up getIntersections, although I'll keep looking into it.