QA@IT

Mac OS Xの最新版Chromeにおいて4097px以上の大きさのCanvasに描画ができない

2153 PV

現在開発を行なっているWebアプリケーションでHTML5のCanvasを使用しています。

このアプリケーションでは縦長の大きなCanvasを用意し、お絵かきソフトのようにマウスドラッグに合わせてストロークを描いているのですが、7月9日に行われたMac OS X向けGoogle Chromeのver. 28.0.1500.71へのバージョンアップ以降、ストロークを描くことができなくなってしまいました。

いろいろと試した結果、以下のコードのようにCanvasのwidthまたはheightを4097px以上にした場合に限り、ストロークを引くことができないバグが発生するようです。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <script type="text/javascript">
            window.onload = function(){
                var ctx = document.getElementById("myCanvas").getContext("2d");
                ctx.beginPath();
                ctx.moveTo(10, 10);
                ctx.lineTo(300, 300);
                ctx.closePath();
                ctx.stroke();
            }
        </script>
        <title>Canvas Test</title>
    </head>
    <body>
        <canvas id="myCanvas" width="4096px" height="4097px"></canvas>
    </body>
</html>

このバグ自体は、Chromeの現在の開発版(ver. 29.0.1547.18 dev)では発現していないのでChromeのバージョンアップによって改善されるとは思いますが、今後できる限りアプリケーションを安定して行くためには、このように大きなサイズのCanvasを使用するようなことは避けたほうがいいのでしょうか。

また、この問題がChromeのバージョンアップによるものであるかどうかも、完全な確証は得られていませんので、他に問題の原因として考えられるものがあれば、ご指摘いただければ幸いです。

HTML5自体まだ正式勧告されていないものなので安定動作を求めるべきではないのかもしれませんが、より安定した動作を実現するために注意すべきことなどあればお教えいただきたいと思い、質問を投稿させて頂きました。
なにとぞよろしくお願いいたします。

回答

大きなキャンバスを使うべきかどうかの是非はわかりませんが、
原因がChromeのバージョンアップなのはまちがいなさそうです。

Good Build : 28.0.1496.0
Bad Build : 28.0.1497.0
https://code.google.com/p/chromium/issues/detail?id=253788

とあるので28.0.1497から混入したバグのようです。

編集 履歴 (0)
ウォッチ

この質問への回答やコメントをメールでお知らせします。