ブラウザーのズームを 150% に設定してキャンバスに線を引くと、線がぼやけます。キャンバスの幅と高さを 2 倍にして、css で元の幅と高さに縮小すると、線がくっきりと表示されます。
上の三角形はぼやけていますが、下の三角形はくっきりしています: http://jsbin.com/acimiq/1
ブラウザのバグですか、OS のバグですか、それとも何か不足していますか?
関連している
- <canvas> のスケーリング時に補間を無効にする
- http://www.html5rocks.com/en/tutorials/canvas/hidpi/
- http://phoboslab.org/log/2012/09/drawing-pixels-is-hard
- http://elev.at/predawnblog/posts/2011/03/crisp-html-5-canvas-text-on-mobile-phones-and.html
Windows 7 の Chrome 27、FF 22、および IE 10 でテストしました。
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>canvas test</title>
<style id="jsbin-css">
#canvas1 {
image-rendering: optimizeSpeed; // Older versions of FF
image-rendering: -moz-crisp-edges; // FF 6.0+
image-rendering: -webkit-optimize-contrast; // Webkit
// (Safari now, Chrome soon)
image-rendering: -o-crisp-edges; // OS X & Windows Opera (12.02+)
image-rendering: optimize-contrast; // Possible future browsers.
-ms-interpolation-mode: nearest-neighbor; // IE
}
#canvas2 {
width: 300px;
height: 150px;
}
</style>
</head>
<body>
<canvas id="canvas1" width="300" height="150"></canvas>
<br/>
<canvas id="canvas2" width="600" height="300"></canvas>
<script>
var canvas1 = document.getElementById('canvas1');
var ctx1 = canvas1.getContext('2d');
ctx1.imageSmoothingEnabled = false;
ctx1.webkitImageSmoothingEnabled = false;
ctx1.mozImageSmoothingEnabled = false;
ctx1.beginPath();
ctx1.moveTo(125,125);
ctx1.lineTo(125,45);
ctx1.lineTo(45,125);
ctx1.closePath();
ctx1.stroke();
var canvas2 = document.getElementById('canvas2');
var ctx2 = canvas2.getContext('2d');
ctx2.scale(2, 2);
ctx2.beginPath();
ctx2.moveTo(125,125);
ctx2.lineTo(125,45);
ctx2.lineTo(45,125);
ctx2.closePath();
ctx2.stroke();
</script>
</body>
</html>