# image

[browser](..) ⟩ [canvas]() ⟩ image

{% tabs %}
{% tab title="⭐️ 重點" %}
{% hint style="danger" %}
[.drawImage()](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/drawImage) will <mark style="color:red;">**do nothing**</mark> if the spicified <mark style="color:blue;">`<img>`</mark> or <mark style="color:blue;">`<video>`</mark> is <mark style="color:yellow;">**still loading**</mark>.
{% endhint %}
{% endtab %}

{% tab title="🔴 主題" %}
* [canvas-snapshot](image/canvas-snapshot "mention")
{% endtab %}

{% tab title="📘 手冊" %}
* [CanvasRenderingContext2D](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D) ⟩ [.drawImage()](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/drawImage)
* [HTMLCanvasElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement) ⟩ [.toDataURL()](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL)
{% endtab %}
{% endtabs %}
