Always draw the ruler from the token's center for larger tokens (even on grids). Highlight all spaces occupied by larger tokens.

src/compatibility.js

@@ -1,30 +1,14 @@
-import {getPixelsFromGridPosition} from "./foundry_fixes.js"
 import {getColorForDistance} from "./main.js"
+import {highlightTokenShape} from "./util.js"
 
 export function getHexSizeSupportTokenGridCenter(token) {
 	const tokenCenterOffset = CONFIG.hexSizeSupport.getCenterOffset(token)
-	const tokenCenter = {x: token.x + tokenCenterOffset.x, y: token.y + tokenCenterOffset.y}
-	if (token.getFlag("hex-size-support", "borderSize") % 2 === 1)
-		return tokenCenter
-	if (canvas.grid.grid.columns) {
-		let hexOffset = canvas.grid.w / 2
-		if (!CONFIG.hexSizeSupport.getAltOrientationFlag(token))
-			hexOffset *= -1
-		tokenCenter.x += hexOffset
-	}
-	else {
-		let hexOffset = canvas.grid.h / 2
-		if (CONFIG.hexSizeSupport.getAltOrientationFlag(token))
-			hexOffset *= -1
-		tokenCenter.y += hexOffset
-	}
-	return tokenCenter
+	return {x: token.x + tokenCenterOffset.x, y: token.y + tokenCenterOffset.y}
 }
 
-export function highlightMeasurementTerrainRuler(ray, startDistance) {
-	for (const space of ray.terrainRulerVisitedSpaces) {
-		const [x, y] = getPixelsFromGridPosition(space.x, space.y);
+export function highlightMeasurementTerrainRuler(ray, startDistance, tokenShape=[{x: 0, y: 0}]) {
+	for (const space of ray.terrainRulerVisitedSpaces.reverse()) {
 		const color = getColorForDistance.call(this, startDistance, space.distance)
-		canvas.grid.highlightPosition(this.name, {x, y, color: color})
+		highlightTokenShape.call(this, space, tokenShape, color)
 	}
 }