| <!DOCTYPE html> |
| <html lang="en"> |
| |
| <head> |
| <style> |
| .container { |
| width: 500px; |
| height: 500px; |
| position: relative; |
| background-color: white; |
| } |
| |
| .pixel { |
| width: 5px; |
| height: 5px; |
| position: absolute; |
| background-color: red; |
| } |
| </style> |
| </head> |
| |
| <body> |
| <div class="container" id="container"></div> |
| </body> |
| |
| <script> |
| window.addEventListener('load', () => registerHandlers()); |
| |
| function registerHandlers() { |
| const container = document.getElementById('container'); |
| let isDrawing = false; |
| |
| container.addEventListener('pointerdown', (e) => { |
| isDrawing = true; |
| colorPixel(e); |
| }); |
| document.addEventListener('pointerup', () => { isDrawing = false; }); |
| container.addEventListener('pointermove', colorPixel); |
| |
| function colorPixel(e) { |
| if (!isDrawing) return; |
| |
| const x = Math.floor((e.clientX - container.offsetLeft) / 5) * 5; |
| const y = Math.floor((e.clientY - container.offsetTop) / 5) * 5; |
| |
| const pixel = document.createElement('div'); |
| pixel.classList.add('pixel'); |
| pixel.style.left = `${x}px`; |
| pixel.style.top = `${y}px`; |
| |
| container.appendChild(pixel); |
| } |
| } |
| </script> |
| |
| </html> |
