Масштабируемый холст в качестве наложения в Google Maps Javascript API

Question

У меня есть изображение (9600x7200), которое я использую в качестве наложения на веб-странице, включенной в Карты Google. Я привязываю углы SW и NW с помощью latlng, и изображение масштабируется правильно, когда я масштабирую карту. Теперь я хочу создать второй оверлей, который является элементом холста HTML5, также размером 9600x7200, который находится поверх изображения. Я могу это сделать, но когда я рисую на холсте, масштабирование/позиционирование - все неправильно. Я использовал https://developers.google.com/maps/documentation/javascript/examples/overlay-simple как шаблон для обоих наложений, который устанавливает элемент overlay на 100% родительского div, который является привязанным к карте. Это отлично подходит для <img>, но не для холста HTML5, который не имеет неотъемлемого размера, такого как изображение. (вы можете установить ширину/высоту в CSS, но основное изображение имеет реальные размеры, которые затем масштабируются до размеров CSS).

Итак, мой вопрос: как создать размер холста размером 9600x7200 и привязать его к моей карте, чтобы он позиционировался и масштабировался в соответствии с обложкой <img> под ней? Существуют ли для этого примеры кода?

Answer 1

Не используйте CSS для изменения размера холста, установите его с помощью атрибутов width и height элемента canvas. Если вы рисуете на холсте (предположим, что он растянут в два раза, это обычный размер для простоты), то и размер, и позиция также будут растянуты. Поэтому, если вы попытаетесь изменить цвет пикселя в x: 10, y: 10, вы получите квадрат 2x2 (приблизительно) в x: 20, y: 20.