🌎
web.dev
search
Ctrlk
  • 🌏web.devchevron-right
  • ⚙️toolschevron-right
  • 🔰HTMLchevron-right
  • 🔰CSSchevron-right
  • 🍒JSchevron-right
  • 🔰web componentchevron-right
  • 🌐browserchevron-right
    • 📘web APIchevron-right
    • 🔰conceptschevron-right
    • 🔰Eventchevron-right
    • 🔰DOMchevron-right
    • 🔰SVGchevron-right
    • 🔳<canvas>chevron-right
      • 👔Canvas+extchevron-right
      • 🔰rectangle
      • 🔰pathchevron-right
      • 🔰text
      • 🔰imagechevron-right
      • 🔰graphics statechevron-right
        • 🔰fill / stroke styleschevron-right
        • 🔰shadows
        • 🔰compositing
        • 🔰transformationchevron-right
        • 🔰clipping
      • ✨canvas exampleschevron-right
    • 🔰storage
    • 🔰animationchevron-right
  • 🔰Reactchevron-right
  • Serverchevron-right
  • 🔖附錄
    • 👔customchevron-right
    • 🧩three.jschevron-right
    • 🅰️Google Apps Scriptchevron-right
    • 📖JSDocchevron-right
    • 📦data structurechevron-right
    • 🔰algorithmchevron-right
    • 🔰paradigmchevron-right
    • 🔰TypeScriptchevron-right
    • 💎resourcechevron-right
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

Was this helpful?

Was this helpful?