<canvas>のスケーリング時に補間を無効にする

注：これはどのように関係しているスケールアップ時に既存のcanvas要素がレンダリングされている、いない線やグラフィックスのレンダリング方法を行うにはキャンバスの表面に。つまり、これは、スケーリングされた要素の補間に関するすべてのことであり、キャンバスに描画されるグラフィックのアンチエイリアスとは何の関係もありません。ブラウザがどのように線を引くかについては気にしていません。拡大したときに、ブラウザー要素がキャンバス要素自体をどのようにレンダリングするかを気にします。

<canvas>要素をスケーリングするときに補間を無効にするようにプログラムで変更できるキャンバスプロパティまたはブラウザ設定はありますか？クロスブラウザソリューションは理想的ですが、必須ではありません。Webkitベースのブラウザーが私の主なターゲットです。パフォーマンスは非常に重要です。

この質問は最も類似していますが、問題を十分に説明していません。それが価値があるもののために、私はimage-rendering: -webkit-optimize-contrast無駄にしようとしました。

アプリケーションは、必要なものを明確にするためにHTML5 + JSで書かれた「レトロ」な8ビットスタイルのゲームになります。

説明のために、ここに例を示します。（ライブバージョン）

21x21のキャンバスがあるとしましょう...

<canvas id='b' width='21' height='21'></canvas>

... CSSがあり、要素を5倍にします（105x105）：

canvas { border: 5px solid #ddd; }
canvas#b { width: 105px; height: 105px; } /* 5 * 21 = 105 */

キャンバスに単純な「X」を次のように描画します。

$('canvas').each(function () {
    var ctx = this.getContext("2d");
    ctx.moveTo(0,0);
    ctx.lineTo(21,21);
    ctx.moveTo(0,21);
    ctx.lineTo(21,0);
    ctx.stroke();
});

左側の画像は、Chromium（14.0）がレンダリングしたものです。右の画像は私が欲しいものです（説明のために手描き）。

最終更新日：2014年9月12日

要素をスケーリングするときに補間を無効にするようにプログラムで変更できるキャンバスプロパティまたはブラウザ設定はありますか？

答えは多分いつかです。とりあえず、ハックアラウンドに頼って必要なものを入手する必要があります。

image-rendering

CSS3のワーキングドラフトは、新しいプロパティの概要を示していますimage-rendering。

image-renderingプロパティは、ユーザーエージェントに適切なスケーリングアルゴリズムの選択を支援するために、画像のスケーリング時に保持する最も重要な画像の側面に関するヒントをユーザーエージェントに提供します。

仕様autoではcrisp-edges、3つの許容値（、、）が概説されていますpixelated。

ピクセル化：

画像を拡大するときは、「最も近いもの」または類似のアルゴリズムを使用して、画像が非常に大きなピクセルで単純に構成されているように見えるようにする必要があります。スケールダウンする場合、これはautoと同じです。

標準？クロスブラウザ？

これは単なる草案であるため、これが標準になる保証はありません。ブラウザのサポートは、せいぜいまだ不十分です。

Mozilla Developer Networkには、私が読むことを強くお勧めする、最新の技術に特化したかなり徹底的なページがあります。

Webkit開発者は当初これをとして一時的に実装する-webkit-optimize-contrastことを選択しましたが、Chromium / Chromeはこれを実装するWebkitのバージョンを使用していないようです。

更新：2014-09-12

Chrome 38がimage-rendering: pixelated！

Firefoxにはバグレポートが公開されてimage-rendering: pixelated実装されていますが、-moz-crisp-edgesますが、今のところ機能します。

解決？

これまでのところ、最もクロスプラットフォームでCSSのみのソリューションは次のとおりです。

canvas {
  image-rendering: optimizeSpeed;             /* Older versions of FF          */
  image-rendering: -moz-crisp-edges;          /* FF 6.0+                       */
  image-rendering: -webkit-optimize-contrast; /* Safari                        */
  image-rendering: -o-crisp-edges;            /* OS X & Windows Opera (12.02+) */
  image-rendering: pixelated;                 /* Awesome future-browsers       */
  -ms-interpolation-mode: nearest-neighbor;   /* IE                            */
}

残念ながら、これはまだすべての主要なHTML5プラットフォーム（特にChrome）では機能しません。

もちろん、JavaScriptで高解像度のキャンバスサーフェスに最近傍補間を使用して画像を手動で拡大することも、サーバー側で画像を事前に拡大することもできますが、私の場合、これは非常にコストがかかるため、実行可能なオプションではありません。

ImpactJSは、テクスチャの事前スケーリング技術を使用して、このすべてのFUDを回避します。Impactの開発者であるDominic Szablewskiは、これについて非常に詳細な記事を書いています（彼は研究でこの質問を引用してしまいました）。

に依存するキャンバスベースのソリューションについては、Simonの回答を参照してください。imageSmoothingEnabledプロパティに（古いブラウザーでは使用できませんが、事前スケーリングよりも簡単で、かなり広くサポートされています）。

ライブデモ

あなたがMDNの記事で説明したCSSプロパティをテストしたい場合はcanvas要素を、私が作ったこのフィドルブラウザによっては、ぼやけたりない、このような何かを表示する必要があります。

新しい回答7/31/2012

いよいよキャンバス仕様になりました！

この仕様では最近、と呼ばれるプロパティが追加されましたimageSmoothingEnabled。これはデフォルトでtrue、整数以外の座標で描画された画像またはスケーリングされて描画された画像がより滑らかなアルゴリズムを使用するかどうかを決定します。に設定されている場合はfalse、nearest-neighborが使用され、滑らかさの低下した画像が生成され、代わりに見た目の大きいピクセルが作成されます。

画像のスムージングがキャンバス仕様に追加されたのはごく最近であり、すべてのブラウザーでサポートされているわけではありませんが、一部のブラウザーでは、このプロパティのベンダープレフィックスバージョンが実装されています。コンテキストではmozImageSmoothingEnabled、FirefoxとwebkitImageSmoothingEnabledChromeとSafari に存在し、これらをfalseに設定すると、アンチエイリアスが発生しなくなります。残念ながら、執筆時点では、IE9とOperaはこのプロパティを実装していません。

プレビュー：JSFiddle

結果：

編集7/31/2012-この機能は現在キャンバス仕様にあります！ここで別の答えを参照してください：

https://stackoverflow.com/a/11751817/154112

古い答えは後世のためです。

希望する効果に応じて、これを1つのオプションとして使用できます。

var can = document.getElementById('b');
var ctx = can.getContext('2d');
ctx.scale(5,5);
$('canvas').each(function () {
    var ctx = this.getContext("2d");
    ctx.moveTo(0,0);
    ctx.lineTo(21,21);
    ctx.moveTo(0,21);
    ctx.lineTo(21,0);
    ctx.stroke();
});

http://jsfiddle.net/wa95p/

これはこれを作成します：

おそらくあなたが望むものではありません。ただし、ぼかしをゼロにすることだけを目的としている場合は、それがチケットになるので、念のため提供します。

より難しいオプションは、ピクセル操作を使用して、ジョブ用のアルゴリズムを自分で作成することです。最初の画像の各ピクセルは、新しい画像のピクセルの5x5ブロックになります。画像データを扱うのはそれほど難しくありません。

ただし、CanvasとCSSだけでは、希望どおりの効果で1つをもう1つにスケーリングするのに役立ちません。

グーグルクロームでは、キャンバス画像パターンは補間されません。

これは、namuolの回答http://jsfiddle.net/pGs4f/から編集された実用的な例です

ctx.scale(4, 4);
ctx.fillStyle = ctx.createPattern(image, 'repeat');
ctx.fillRect(0, 0, 64, 64);

ここで説明されているSaviskiの回避策は有望です。

• Chrome 22.0.1229.79 Mac OS X 10.6.8
• Chrome 22.0.1229.79 m Windows 7
• Chromium 18.0.1025.168（Developer Build 134367 Linux）Ubuntu 11.10
• Firefox 3.6.25 Windows 7

ただし、以下では機能しませんが、CSS画像レンダリングを使用して同じ効果を得ることができます。

• Firefox 15.0.1 Mac OS X 10.6.8（image-rendering：-moz-crisp-edges これで動作します）
• Opera 12.02 Mac OS X 10.6.8（image-rendering：-o-crisp-edges works in this）
• Opera 12.02 Windows 7（image-rendering：-o-crisp-edgesはこれで動作します）

ctx.XXXImageSmoothingEnabledが機能せず、画像レンダリングが機能しないため、問題は次のとおりです。

• Safari 5.1.7 Mac OS X 10.6.8。（画像レンダリング：-webkit-optimize-contrastは機能しません）
• Safari 5.1.7 Windows 7（image-rendering：-webkit-optimize-contrastは機能しません）
• IE 9 Windows 7（-ms-interpolation-mode：nearest-neighborは機能しません）