I have a very simple code which draws a image on a large canvas (2560 * 2560), which works perfectly in FireFox but in IE the images are not getting rendered after a particular width and height (approximately after 2200). Canvas does respond to click events in that area.
Check the code:
Is this a bug with IE9, or a design constraint of width and size of canvas/context?
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
</head>
<body>
<div style="background-color:#000;width:2560px;height:2560px;">
<canvas id="map" width="2560px" height="2560px"></canvas>
</div>
</body>
</html>
<script
src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.5.1.min.js"
type="text/javascript"></script>
<script>
$(document).ready(function () {
var canvas = document.getElementById("map");
var ctx = canvas.getContext("2d");
var img = new Image();
img.onload = function () {
for (var y = 0; y < 2560; y += 256) {
for (var x = 0; x < 2560; x += 256) {
ctx.drawImage(img, x, y, 256, 256);
}
}
ctx.fillStyle = "rgba(255, 0, 0, 1)";
ctx.fillRect(2400, 2400, 100, 100);
};
img.src = "http://mt1.google.com/vt/lyrs=m@157000000&hl=en&x=9&y=28&z=6&s=Ga";
});
</script>
width=
andheight=
require numbers withoutpx
.