[javascript]canvas、drawImageの機能の違いによる速度の影響を調べるdrawImageは、canvasで画像を使用するためのメソッドです。 パラメータがいろいろあるので、機能の違いから、速度にどのくらい影響するのかを調べてみました。 ●drawImageの使い方 使い方は、下記を参照してください。 解りやすい解説があります。 Mozilla Developer Center > Canvas チュートリアル > 画像を使う https://developer.mozilla.org/ja/Canvas_tutorial/Using_images 一度画像をImageオブジェクトに読み込ませないといけないところは他のグラフィック要素と違って面倒ではありますよね。 ●処理時間の計測方法 ベースとなるサイズを320px×480pxとし、50%、100%（原寸）、150%、200%にした画像を用意する。 用意した画像について、下記の4パターンをテストしてみます。
![[javascript]canvas、drawImageの機能の違いによる速度の影響を調べる](https://cdn-ak-scissors.b.st-hatena.com/image/square/09b30d4775393807750218942f0def9479d71e39/height=288;version=1;width=512/https%3A%2F%2Fsiteproxy.ruqli.workers.dev%3A443%2Fhttps%2Fblogger.googleusercontent.com%2Fimg%2Fb%2FR29vZ2xl%2FAVvXsEjBMHXrgvi8sUa7TO3Hf4N0gLu_8Xkl5w4qNfl-00Ia86EROCRCSJeDoaCi9iJ8a0U8zeBTHe7q50oFfx-_pCOkDkchoISCPjI7lN5y0pXXXQBV_caMDW_FzKfPBq1YknrE0Qdg7tbU-Bk%2Fw1200-h630-p-k-no-nu%2Fdrawimage_chart1.png)
