🔳<canvas>

browser ⟩ canvas

<canvas> elements have 2 sizes:

• canvas size: size displayed on the page. (that's what we set with CSS)

• canvas resolution: number of pixels in the canvas. (like an image)

👉 three.js ⟩ Responsive Design

⭐️ 重點

Most of the Canvas drawing API is defined not on the element itself, but instead on a “drawing context” object obtained with HTMLCanvasElement.getContext().

<canvas> only supports two primitive shapes: rectangle and path.

canvas.width 與 canvas.stlyle.width 作用不同❗

👉 segmentfault ⭐️

🔴 主題

• graphics

  • rectangle

  • path

  • text

  • image ⟩ canvas snapshot

• graphics state

  • fill / stroke styles ⟩

    • colors ⟩ color wheel

    • gradients ⟩

      • ctx.gradient() - create gradients.

    • patterns

  • shadows, compositing, clipping

  • transformation ⟩ Koch snowflake

• Canvas+ext ⭐
• canvas examples

👥 相關

• Vector

• DOM hierarchy

📗 參考

• JavaScript: The Definitive Guide (15.8 Graphics in a <canvas>)

• 📘 Canvas tutorial
• canvas.width 和 canvas.style.width 区别以及应用 ⭐️

📘 手冊

• Canvas API

• HTML ⟩ Elements ⟩ <canvas>

• HTMLCanvasElement ⟩

  • .getContext() - returns

    • CanvasRenderingContext2D for "2d"

    • WebGLRenderingContext for "webgl" | "experimental-webgl"

    • WebGL2RenderingContext for "webgl2"

    • ImageBitmapRenderingContext for "bitmaprenderer"

    • null, otherwise.

• HTMLElement.style (CSSStyleDeclaration)

🗣 討論

• What is the difference between canvas.width and canvas.clientWidth

• javascript.info ⟩ The difference: CSS width versus clientWidth