HTML Canvas 최적화
canvas 2d context 최적화 2d context 생성 시 alpha(투명도) 옵션을 false로 생성 context alpha 채널이 포함되지 않도록 하여, 브라우저는 배경이 항상 불투명하다고 인식하므로, 렌더링 속도가 개선 const context = canvas.getContext('2d', { alpha: false }); 안티 앨리어싱 컴퓨터 그래픽 해상도의 한계로 계단 현상이 발생하는 앨리어싱이 발생 DPR (Device Pixel Ratio) : CSS Pixel을 구성하는데 필요한 물리적 Pixel 수 ex) 해상도가 높은 모니터에서 text가 흐릿하게 보이는 text blurry 현상이 발생됨 DPR의 기본값은 1, 레티나 디스플레이의 DPR은 2인데, 이때 디스플레이마다 CSS..
React, Typescript/Rust canvas method 계속 추가
1. canvas 요소 및 ref 정의 //html //typescript const canvasRef = useRef(null); //rust //dom에 직접 접근하지 않음. //wasm 사용 중이므로 함수의 인자로 넘겨주는 방식 fn canvas(canvas: web_sys::HtmlCanvasElement) { ... } 2. '2d' context 정의 - context는 화면에 그림을 그릴 펜이라고 생각하면 된다. //typescript //ref가 null일수 있으므로 옵셔널 체이닝 정의 let context = canvasRef.current?.getContext('2d'); //rust let context = canvas .get_context("2d") .unwrap() .unwrap..