可缩放画布作为Google Maps JavaScript API中的叠加层

Question

I have an image (9600x7200) that I am using as an overlay on a Google Maps enabled web page. I anchor the SW and NW corners with latlng and the image scales correctly when I zoom the map. Now I want to create a second overlay that is an HTML5 canvas element, also sized 9600x7200, that sits on top of the image. I can do this but when I draw on the canvas, the scaling/positioning is all wrong. I used https://developers.google.com/maps/documentation/javascript/examples/overlay-simple as a template for both overlays, which sets the overlay element to 100% of the parent div, which is what is anchored to the map. This works fine for a <img> , but not for an HTML5 canvas, which does not have an inherent size like an image does. (you can set the width/height in CSS, but the underlying image has real dimensions that then scale to the CSS dimensions).

So, my question is: How do I create a drawable canvas size of 9600x7200, and anchor this to my map so it positions and scales to match the <img> overlay beneath it? Are there any code samples for this?

Answer 1

Don't use CSS to resize your canvas, set it via the width and height attributes of the canvas element. If you draw on a canvas (let's say it's stretched to twice it's normal size for simplicity) both it's size and position will be stretched as well. So if you try to change the color of a pixel at x: 10, y: 10, you'll get a 2x2 (approximately) square at x: 20, y: 20.