IN-DEPTH GUIDE // HTML5 CANVAS VECTOR SKETCHING & HIGH-DPI DRAFTING
Understanding pointer event coordinates, sub-pixel rasterization, device pixel ratios, and non-destructive canvas export.
Client-Side Slate Architecture
Tactical Slate transforms your browser into an airgapped digital drafting whiteboard. By orchestrating hardware-accelerated HTML5 Canvas 2D contexts (CanvasRenderingContext2D) with high-frequency W3C Pointer Events, every stroke is captured with zero input latency.
Whether interacting via precision desktop mice, graphic drawing tablets (Apple Pencil, Wacom), or multi-touch mobile screens, the engine normalizes screen coordinates against native window.devicePixelRatio metrics, ensuring crisp vector rendering on Retina and 4K displays without blur.
Bézier Smoothing & Neon Optics
To eliminate jagged pixelation during rapid sketching, line segments are rendered with rounded caps (lineCap = 'round') and rounded joins (lineJoin = 'round').
When Neon Glow is activated, Gaussian blur halos are composited in real time using the GPU canvas shadow renderer (shadowBlur and shadowColor), recreating the authentic luminescence of vintage HUD radar displays.
Frequently Asked Questions
Are my drawings sent to any cloud server?
Never. Tactical Slate operates on a 100% client-side privacy model. All pixel rasters and stroke history reside exclusively in your local browser tab's transient memory.
How do Undo and Redo work?
Every completed pointer stroke snapshots the canvas state into an in-memory stack using getImageData() / putImageData(). You can traverse forward and backward using the UI buttons or standard shortcuts (Ctrl+Z / Ctrl+Y).
What is the difference between solid and transparent export?
Standard PNG export includes the dark Obsidian background (`#05070d`), making it ready for instant sharing or slide embedding. Transparent PNG export exports only your neon vector strokes, ideal for graphic overlays.
Can I copy the canvas directly to my clipboard?
Yes. Clicking 'COPY IMAGE' generates an in-memory PNG blob and invokes the native Async Clipboard API (navigator.clipboard.write) to paste directly into Discord, Slack, or Figma.