HTML では画像に crossorigin 属性を提供し、適切な CORS ヘッダーと組み合わせることで、 <img> 要素で定義されている他のオリジンから読み込まれた画像を、 <canvas> の中で現在のオリジンから読み込まれた画像であるかのように扱うことができます。 crossorigin 属性の使い方については CORS 設定属性をご覧ください。 キャンバスのビットマップ内のピクセルは様々なソース、例えば他のホストから受け取った画像や動画などから来ることもありますが、セキュリティの問題が発生することが避けられません。 CORS による許可なしに他のオリジンから読み込んだ何らかのデータをキャンバスに描画すると、キャンバスは汚染 (taint) されてしまいます。汚染されたキャンバスは安全とみなされなくなり、そのキャンバスから画像データを取得しようとすると、例外が発生するでしょう。
![画像とキャンバスをオリジン間で利用できるようにする - HTML: ハイパーテキストマークアップ言語 | MDN](https://cdn-ak-scissors.b.st-hatena.com/image/square/aa767575b4232d312d2c5de428f0bf0955805e26/height=288;version=1;width=512/https%3A%2F%2Fdeveloper.mozilla.org%2Fmdn-social-share.cd6c4a5a.png)