<canvas id="sample_canvas" width="640" height="800" style="width: 320px; height: 400px"></canvas> これで、Retinaディスプレイできれいに表示できる。 しかし、このままでは以下のような問題が起きちゃう。 2倍のサイズのCanvasに描画を行うため、処理が重くなる そのため 一部のAndroid端末にて、ブラウザが落ちる、端末が発熱する 一部のAndroid端末にて、Canvas要素のstyle属性を動的に変更するとブラウザが落ちる そこで、Retina以外の端末向けに、処理の切り分けが必要になる。 Canvas要素は実際のサイズ。Canvas上の座標系をあわせるために、 Canvasのscaleを0.5にする。
![本当は怖い HTML5 Canvas の Retina対応 - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/0fa1d0396c796e461177b2fa899e754e04863bca/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-9f5428127621718a910c8b63951390ad.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZoPTMzNiZ0eHQ9JUU2JTlDJUFDJUU1JUJEJTkzJUUzJTgxJUFGJUU2JTgwJTk2JUUzJTgxJTg0JTIwSFRNTDUlMjBDYW52YXMlMjAlRTMlODElQUUlMjBSZXRpbmElRTUlQUYlQkUlRTUlQkYlOUMmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZ0eHQtY2xpcD1lbGxpcHNpcyZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPTM2YmNhNjE0MGYxZDQ1OTJkYzIzYWZjMGFkYWI4NjQ1%26mark-x%3D142%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQwY2FsbWJvb2tzJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz00NjNhYTVmZmUwNmJmYjlkZTkxNTc2NmFkODFjMzllOQ%26blend-x%3D142%26blend-y%3D491%26blend-mode%3Dnormal%26s%3D937fd3b0fb3d6ac0e8344f1374b41658)