趣味でプログラミングをしているいちいち@ichiichi_1115 です。
enchant.jsで画像の拡大をしてたらぼやけてしまったので備忘録＆その先に躓く人がいないようにまとめてみました。

imageSmoothingEnabled をFalseに

imageSmoothingEnabled をFalseにすると、補完処理をしなくなるという話を聞いたのでやってみました。

enchant.js(整形版)4460行目あたりに、_dctxといういかにもコンテキストそうな変数があったのでそれに対してやってみたが効果なし...

というか、すでにimageSmoothingEnabledがFalseにされていました(以下コード)。

enchant.js

    _setImageSmoothingEnable: function() {
        this._dctx.imageSmoothingEnabled =
        this._dctx.msImageSmoothingEnabled =
        this._dctx.mozImageSmoothingEnabled =
        this._dctx.webkitImageSmoothingEnabled = false;
    }

JavaScriptの書き方で、a = b = falseと書くと、aもbもFalseになりますが、その記法です。

とりあえず、これでは治りませんでした。

リファレンスを読む

imageSmoothingEnabledのリファレンスを読んでたら、こんなものを発見しました。

このプロパティは、たとえばキャンバスをスケーリングするような、ピクセルアートをテーマにしたゲームに役立ちます。既定のリサイズアルゴリズムは、ぼやかし効果をかけることで、美しいピクセルを崩してしまいます。このような場合、このプロパティを false に設定します。image-rendering プロパティも確認してください。

image-rendering プロパティも確認してくださいらしいです。

これは、画像を拡大縮小するときのアルゴリズムを指定するものらしいです。

image-rendering

詳しくはリファレンスに書いてありますが、これを pixelated という値にすると、ピクセル画で表示されます。

読解力と知識の無さでその他の値については読み解けませんでしたスマヌ...

#まとめ

以下をコピーして、styleタグやcssファイルに貼り付けてください。

style.css


    canvas{
        image-rendering: pixelated;
    }

これで、画像を拡大してもぼやけさせずに表示することができました！！！

以上。