🌎
web.dev
search
⌘Ctrlk
🌎
web.dev
  • 🌏web.dev
  • ⚙️tools
  • 🔰HTML
  • 🔰CSS
  • 🍒JS
  • 🔰web component
  • 🌐browser
    • 📘web API
    • 🔰concepts
    • 🔰Event
    • 🔰DOM
    • 🔰SVG
    • 🔳<canvas>
      • 👔Canvas+ext
      • 🔰rectangle
      • 🔰path
      • 🔰text
      • 🔰image
      • 🔰graphics state
        • 🔰fill / stroke styles
        • 🔰shadows
        • 🔰compositing
        • 🔰transformation
        • 🔰clipping
      • ✨canvas examples
    • 🔰storage
    • 🔰animation
  • 🔰React
  • Server
  • 🔖附錄
    • 👔custom
    • 🧩three.js
    • 🅰️Google Apps Script
    • 📖JSDoc
    • 📦data structure
    • 🔰algorithm
    • 🔰paradigm
    • 🔰TypeScript
    • 💎resource
gitbookPowered by GitBook
block-quoteOn this pagechevron-down
  1. 🌐browserchevron-right
  2. 🔳<canvas>

🔰graphics state

browser ⟩ canvas ⟩ graphics state

circle-check

the drawing state that gets saved onto a stack:

  • current transformation matrix

  • current clipping region

  • current dash list: .setLineDash()arrow-up-right, .getLineDash()arrow-up-right, .lineDashOffsetarrow-up-right

  • current values of:

    • fill / stroke styles:

      • colors ⟩ color wheel

      • patterns, gradients

    • line styles: lineWidtharrow-up-right, lineCaparrow-up-right, lineJoinarrow-up-right, miterLimitarrow-up-right, lineDashOffsetarrow-up-right

    • shadows: shadowOffsetXarrow-up-right, shadowOffsetYarrow-up-right, shadowBlurarrow-up-right, shadowColorarrow-up-right

    • compositing: globalCompositeOperationarrow-up-right, globalAlphaarrow-up-right

    • text styles: fontarrow-up-right, textAlignarrow-up-right, textBaselinearrow-up-right, directionarrow-up-right

    • imageSmoothingEnabledarrow-up-right

  • CanvasRenderingContext2Darrow-up-right ⟩

    • .save()arrow-up-right

    • .restore()arrow-up-right

Previouscanvas snapshotchevron-leftNextfill / stroke styleschevron-right

Last updated 3 years ago