# \<canvas>

[browser]() ⟩ canvas

{% hint style="success" %}
<mark style="color:purple;">`<canvas>`</mark> elements <mark style="color:yellow;">**have**</mark>**&#x20;**<mark style="color:red;">**2**</mark>**&#x20;**<mark style="color:yellow;">**sizes**</mark>:&#x20;

* <mark style="color:yellow;">**canvas**</mark>**&#x20;**<mark style="color:orange;">**size**</mark>: size displayed on the page. (that's what we set with [CSS](../css))
* <mark style="color:yellow;">**canvas**</mark>**&#x20;**<mark style="color:orange;">**resolution**</mark>: number of pixels in the canvas. (like an image)

:point\_right: three.js ⟩ [Responsive Design](https://threejs.org/manual/#en/responsive)&#x20;
{% endhint %}

{% tabs %}
{% tab title="⭐️ 重點" %}
{% hint style="info" %}
Most of the <mark style="color:yellow;">**Canvas drawing API**</mark> is defined <mark style="color:red;">**not on the element**</mark> itself, but instead on a “<mark style="color:orange;">**drawing context**</mark>” object obtained with [HTMLCanvasElement.getContext()](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/getContext).
{% endhint %}

{% hint style="info" %}
[`<canvas>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/canvas) only supports two primitive shapes: [rectangle](canvas/rectangle "mention") and [path](canvas/path "mention").
{% endhint %}

{% hint style="warning" %}
canvas.[width](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/width) 與 canvas.[stlyle.width](https://www.w3schools.com/jsref/prop_style_width.asp) 作用不同:exclamation:

:point\_right: [segmentfault](https://segmentfault.com/a/1190000016819776) ⭐️&#x20;
{% endhint %}
{% endtab %}

{% tab title="🔴 主題" %}
* <mark style="color:yellow;">**graphics**</mark>
  * [rectangle](canvas/rectangle "mention")
  * [path](canvas/path "mention")&#x20;
  * [text](canvas/text "mention")&#x20;
  * [image](canvas/image "mention") ⟩ [canvas-snapshot](canvas/image/canvas-snapshot "mention")
* [state](canvas/state "mention")
  * [styles](canvas/state/styles "mention") ⟩&#x20;
    * [colors](canvas/state/styles/colors "mention") ⟩ [color-wheel](canvas/state/styles/colors/color-wheel "mention")
    * [gradient](canvas/state/styles/gradient "mention") ⟩
      * [ctx.gradient](canvas/state/styles/gradient/ctx.gradient "mention") - create gradients.
    * [pattern](canvas/state/styles/pattern "mention")
  * [shadow](canvas/state/shadow "mention"), [compositing](canvas/state/compositing "mention"), [clipping](canvas/state/clipping "mention")
  * [matrix](canvas/state/matrix "mention") ⟩ [koch-snowflake](canvas/state/matrix/koch-snowflake "mention")
* [+ext](canvas/+ext "mention") :star:
* [examples](canvas/examples "mention")
{% endtab %}

{% tab title="👥 相關" %}
* [vector](../appendix/custom/class/vector "mention")
* [hierarchy](dom/hierarchy "mention")
{% endtab %}

{% tab title="📗 參考" %}
* [ ] JavaScript: The Definitive Guide (15.8 Graphics in a \<canvas>)
* [ ] :blue\_book: [Canvas tutorial](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial)
* [ ] [canvas.width 和 canvas.style.width 区别以及应用](https://segmentfault.com/a/1190000016819776) ⭐️&#x20;
{% endtab %}

{% tab title="📘 手冊" %}
* [Canvas API](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API)
* [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) ⟩ [Elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Element) ⟩ [\<canvas>](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/canvas)
* [HTMLCanvasElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement) ⟩[ ](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/getContext)
  * [.getContext()](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/getContext) - returns&#x20;
    * [`CanvasRenderingContext2D`](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D) for `"`<mark style="color:orange;">`2d`</mark>`"`
    * [`WebGLRenderingContext`](https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext) for `"`<mark style="color:orange;">`webgl`</mark>`"` | `"`<mark style="color:orange;">`experimental-webgl`</mark>`"`
    * [`WebGL2RenderingContext`](https://developer.mozilla.org/en-US/docs/Web/API/WebGL2RenderingContext) for `"`<mark style="color:orange;">`webgl2`</mark>`"`&#x20;
    * [`ImageBitmapRenderingContext`](https://developer.mozilla.org/en-US/docs/Web/API/ImageBitmapRenderingContext) for `"`<mark style="color:orange;">`bitmaprenderer`</mark>`"`
    * [**null**](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/null), otherwise.
* [HTMLElement.style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) ([CSSStyleDeclaration](https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration))
{% endtab %}

{% tab title="🗣 討論" %}
* [What is the difference between canvas.width and canvas.clientWidth](https://stackoverflow.com/questions/66835903/what-is-the-difference-between-canvas-width-and-canvas-clientwidth)
* javascript.info ⟩ [The difference: CSS width versus clientWidth](https://javascript.info/task/width-vs-clientwidth)&#x20;
{% endtab %}
{% endtabs %}
