> For the complete documentation index, see [llms.txt](https://lochiwei.gitbook.io/web/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://lochiwei.gitbook.io/web/browser/canvas.md).

# \<canvas>

[browser](/web/browser.md) ⟩ 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](/web/css.md))
* <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](/web/browser/canvas/rectangle.md) and [path](/web/browser/canvas/path.md).
{% 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](/web/browser/canvas/rectangle.md)
  * [path](/web/browser/canvas/path.md)&#x20;
  * [text](/web/browser/canvas/text.md)&#x20;
  * [image](/web/browser/canvas/image.md) ⟩ [canvas snapshot](/web/browser/canvas/image/canvas-snapshot.md)
* [graphics state](/web/browser/canvas/state.md)
  * [fill / stroke styles](/web/browser/canvas/state/styles.md) ⟩&#x20;
    * [colors](/web/browser/canvas/state/styles/colors.md) ⟩ [color wheel](/web/browser/canvas/state/styles/colors/color-wheel.md)
    * [gradients](/web/browser/canvas/state/styles/gradient.md) ⟩
      * [ctx.gradient()](/web/browser/canvas/state/styles/gradient/ctx.gradient.md) - create gradients.
    * [patterns](/web/browser/canvas/state/styles/pattern.md)
  * [shadows](/web/browser/canvas/state/shadow.md), [compositing](/web/browser/canvas/state/compositing.md), [clipping](/web/browser/canvas/state/clipping.md)
  * [transformation](/web/browser/canvas/state/matrix.md) ⟩ [Koch snowflake](/web/browser/canvas/state/matrix/koch-snowflake.md)
* [Canvas+ext](/web/browser/canvas/+ext.md) :star:
* [canvas examples](/web/browser/canvas/examples.md)
  {% endtab %}

{% tab title="👥 相關" %}

* [Vector](/web/appendix/custom/class/vector.md)
* [DOM hierarchy](/web/browser/dom/hierarchy.md)
  {% 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 %}