Documentation / @finchart/core / applyColor
Function: applyColor()
applyColor(
context,channel,color,verdicts?):void
Defined in: packages/core/src/render/canvas-renderer.ts:514
대입이 먹었는지 확인한다.
ctx.fillStyle = "nope"는 던지지 않고 무시된다 — 직전 명령이 걸어 둔 색이 그대로 남아 오타 하나가 이웃 색으로 그려진다. 오타만이 아니라 currentColor·light-dark(...)·정의 안 된 var(--brand)도 getComputedStyle을 그대로 통과해 여기 온다.
되읽어서 판정한다 — 투명을 먼저 걸고 대입하면 "안 바뀌었다"가 곧 "거절됐다"가 된다. 브라우저가 색을 정규화하므로(#fff → rgb(...)) 문자열 비교가 아니라 "바뀌었나"를 본다.
그런데 그 되읽기 자체가 비쌌다 — 캔버스 채널을 읽으면 브라우저가 현재 색을 CSS 문자열로 직렬화하는데, 명령마다 두 번씩 걸면 명령 17,000개짜리 프레임에서 직렬화가 3만 4천 번 돈다.
| 호버 프레임 | 총 | commit |
|---|---|---|
| 되읽기 이전 | 3.70ms | 2.42ms |
| 되읽기 도입 후 | 9.70ms | 8.22ms |
| 되읽기만 우회 | 4.00ms | 2.66ms |
그래서 판정을 캐시한다 — 캔버스의 색 파싱은 문자열만의 함수라 값마다 한 번이면 된다. 캐시를 안 주면 예전 경로 그대로다(느리지만 옳다).
Parameters
context
channel
"fillStyle" | "strokeStyle"
color
string | CanvasGradientLike | CanvasPatternLike
verdicts?
Returns
void