This algorithm might help you design your app Calculate Distance within a Canvas
As far as the Canvas knows the upper left corner is the coordinates that are recognized as the actual location of the sprite. In your case, is the tip of the arrow at the upper left hand corner?
When colliding with respective colors, the advice here might be pertinent Creating Animated Apps