Hacktoberfest 2026: những issue maintainer đã đánh dấu cho tháng Mười, đang mở và phù hợp người mới. Xem issue Hacktoberfest

Use canvas scaling rather than css scaling for full screen / fit to help reduce "fuzzy" look when scaling

Đang mở
  • Có gì không ổn?
#515 0 bình luận 0 reaction 0 người được giao Xem trên GitHub

Chưa có ai nhận issue này.

  • #517 của @jcollard — đã đóng, không merge

Đánh giá

Độ khó
4/5
Thời gian dự kiến
3-5 ngày
Mức phù hợp với người mới
45/100
Loại issue
Tính năng
Độ rõ ràng
Khá rõ ràng
Mức độ hoạt động
Đình trệ
Công nghệ
typescript
Lĩnh vực
computer-graphics, frontend

Hướng nghiên cứu

Start with src/components/CanvasGamePanel/CanvasGamePanel.tsx and CanvasGamePanel.module.css to trace how fit/full and native sizing are applied, then inspect packages/canvas-runtime/src/renderer/CanvasRenderer.ts for rendering dimensions and scaling. Done means fit/full use container size × devicePixelRatio, Lua still sees logical dimensions, drawing remains correctly scaled, and native mode is unchanged.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Mô tả

enhancement

Problem

When using "fit" or "full" scaling modes, the canvas appears "fuzzy" or blurry because scaling is done via CSS (object-fit: contain) rather than native canvas sizing. This is especially noticeable on HiDPI displays or when the canvas is scaled up significantly.

Current Behavior

  • Canvas element has fixed width/height attributes (e.g., 800x600)
  • CSS object-fit: contain visually scales the canvas to fit the container
  • No device pixel ratio (DPI) awareness

Desired Behavior

  • Canvas width/height should match the actual rendered size × device pixel ratio
  • Drawing coordinates should be scaled appropriately to preserve Lua code behavior
  • Lua API returns logical dimensions (backward compatible)
  • Result: crisp rendering at any scale without blurriness

Affected Files

  • src/components/CanvasGamePanel/CanvasGamePanel.tsx
  • src/components/CanvasGamePanel/CanvasGamePanel.module.css
  • packages/canvas-runtime/src/renderer/CanvasRenderer.ts

Acceptance Criteria

  • Canvas uses native resolution matching container size × devicePixelRatio
  • Fit/full modes render without CSS-induced blur
  • Lua API returns logical dimensions (backward compatible)
  • Drawing commands are internally scaled by devicePixelRatio
  • Native mode unchanged
Ngôn ngữ chính
TypeScript
Star
1
Fork
0
Không có pull request nào được merge trong 30 ngày

Chuẩn bị môi trường

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Issue khác của jcollard/LuaInTheWeb

Tất cả issue của jcollard/LuaInTheWeb

Issue tương tự

Thêm issue về TypeScript

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.