0
196
ViewsObtener líneas nítidas de píxeles perfectos usando lienzo HTML
He buscado extensamente una respuesta a este problema y lo que encontré estaba desactualizado o no funcionaba.
Estoy tratando de crear un lienzo de 320 x 240 píxeles y renderizar algunas líneas que aparecen pixeladas (con alias, con bordes claros en cada píxel). El sistema en el que estoy ejecutando esto informa un window.devicePixelRatio de 1, y estoy usando los mismos valores para el ancho/alto del elemento que el ancho/alto de CSS.
Aquí hay una captura de pantalla de lo que estoy viendo (un navegador Firefox en un sistema Windows que tiene la resolución del sistema establecida en 1360 x 768 a la izquierda, y la imagen "ideal" como me gustaría verla a la derecha - es un maqueta hecha con un programa de pintura): 
Aquí están los tres archivos que estoy usando:
let canvas = document.querySelector(".playground-canvas"); let ctx = canvas.getContext("2d"); ctx.fillRect(5, 5, 50, 50); ctx.beginPath(); ctx.moveTo(4.5, 15.5); ctx.lineTo(15.5, 220.5); ctx.lineWidth = 0.5; ctx.strokeStyle = "red"; ctx.stroke(); * { box-sizing: border-box; } body { background: #333; padding: 0; margin: 0; overflow: hidden; } .playground-container { position: relative; width: 320px; height: 240px; margin: 0 auto; outline: 1px solid #fff; transform: scale(2) translateY(30%); } .playground-container canvas { image-rendering: pixelated; } <!DOCTYPE html> <html> <head> <title>The Ideal Playground</title> <link href="playground.css" type="text/css" rel="stylesheet" /> </head> <body> <div class="playground-container"> <canvas class="playground-canvas" width="320" height="240"></canvas> </div> <script src="playground.js"></script> </body> </html>Supongo que estoy tratando de pedirle algo a HTML/CSS/JS que simplemente no puede hacer de manera confiable en el mundo actual de pantallas de alto DPI, etc.
Cualquier ayuda apreciada, gracias.