Здравствуйте.
Есть такой код:
<!DOCTYPE html>
<html>
<head>
<title>Canvas Test</title>
<meta charset="utf-8">
</head>
<body style="overflow: hidden;">
<canvas id="maincanvas" style="width: 90%; height: 90%; top: 10px; left: 10px;"></canvas>
<script>
var canvas = document.getElementById('maincanvas');
var ctx = canvas.getContext('2d');
ctx.imageSmoothingEnabled = false;
ctx.mozImageSmoothingEnabled = false;
ctx.msImageSmoothingEnabled = false;
ctx.webkitImageSmoothingEnabled = false;
var idata = ctx.createImageData(canvas.width, canvas.height);
var x0 = 10;
var x1 = 100;
var y0 = 10;
var y1 = 100;
var x = x0;
var y = y0;
var i;
while(y <= y1) {
while(x <= x1) {
i = (y * idata.width + x) * 4;
idata.data[i + 3] = 255;
x++;
}
x = x0;
y++;
}
ctx.putImageData(idata, 0, 0);
</script>
</body>
</html>Получается: чёрный квадрат с размытыми краями.
Почему так происходит и как сделать так, чтобы не происходило?
