Overview
The Emoji Drawing Pad with Smart Eraser represents an advanced object-oriented vector canvas drawing environment and sonification laboratory. Traditional raster digital painting utilities operate by directly overwriting raw pixel buffers (a $W \times H \times 4$ red-green-blue-alpha array). While computationally simple, pixel manipulation exhibits severe drawbacks: destruction of overlapping visual layers, inability to select or move placed vector components, cumulative blur artifacts during transformations, and severe memory overhead when maintaining undo history buffers.
This visual laboratory abstracts canvas elements into a discrete vector scene graph data structure $\mathcal{S} = \{ \mathbf{e}_1, \mathbf{e}_2, \dots, \mathbf{e}_N \}$. Each individual emoji placed on the canvas exists as a discrete mathematical entity characterized by an eight-dimensional state tuple:
$$\mathbf{e}_i = \left( \chi_i, x_i, y_i, S_i, \theta_i, \omega_i, A_i, \tau_i \right)$$
where $\chi_i$ represents the Unicode emoji symbol character (including bears $\text{🐻}$, polar bears $\text{🐻❄️}$, pandas $\text{🐼}$, and catalog glyphs), $(x_i, y_i)$ defines the 2D Cartesian spatial coordinates relative to the canvas origin, $S_i$ denotes the rendering font size scale in pixels ($16\text{px} - 120\text{px}$), $\theta_i$ represents rotational orientation in radians, $\omega_i$ specifies the primary acoustic synth frequency assigned via spatial vertical mapping, $A_i$ represents initial peak audio gain amplitude, and $\tau_i$ defines the exponential acoustic decay time constant.
By preserving the vector scene graph, the system unlocked the implementation of a mathematical Smart Eraser algorithm. Rather than indiscriminately painting white background pixels over existing drawings, the Smart Eraser executes spatial distance queries in continuous 2D space. When the cursor passes over the visual workspace, the eraser computes the point-to-point Euclidean metric $d(\mathbf{p}_{\text{cursor}}, \mathbf{e}_i)$ against all active vector elements, instantly removing matching nodes from the scene graph array without disturbing underlying or adjacent artwork elements.
Technical Details & Algorithmic Design
The Emoji Drawing Pad software architecture utilizes a high-efficiency double-buffered HTML5 Canvas pipeline combined with the Web Audio API and Pointer Event capture APIs:
1. Continuous Pointer Capture Architecture
Continuous touch and mouse stroke continuity is guaranteed by binding the pointer ID via canvas.setPointerCapture(e.pointerId) inside the pointerdown handler. Distance calculations between consecutive stroke points execute using the vector spatial gap metric:
$$\Delta d = \sqrt{(x_k - x_{\text{last}})^2 + (y_k - y_{\text{last}})^2}$$
When $\Delta d \ge \text{brushGap}$, a new vector node $\mathbf{e}_k$ is appended to scene graph $\mathcal{S}$ and $x_{\text{last}}, y_{\text{last}}$ are updated to the current coordinates. This eliminates touch gesture dropped frames and avoids duplicate stacking when the cursor halts.
2. Spatial Hit Detection for Smart Erasing
During an erasing stroke at cursor coordinate $(x_c, y_c)$ with eraser hit radius $R_{\text{eraser}}$, the engine iterates backward through the scene graph array $\mathcal{S}$ to locate elements satisfying the spatial inequality:
$$d_i = \sqrt{(x_c - x_i)^2 + (y_c - y_i)^2} \le R_{\text{eraser}}$$
Upon meeting this condition, element $\mathbf{e}_i$ is spliced out of array $\mathcal{S}$. Removing elements from back-to-front prevents array indexing shift bugs during iteration and ensures top-most rendered z-index objects are deleted first.
3. Dynamic High-DPI Scaling Normalization
To eliminate visual blur on modern Retina and high-density mobile screens, canvas backing store dimensions are dynamically scaled by the device pixel ratio ($DPR = \text{window.devicePixelRatio} \parallel 1$). The physical buffer dimensions are updated according to:
$$W_{\text{buffer}} = \lfloor W_{\text{CSS}} \times DPR \rfloor, \quad H_{\text{buffer}} = \lfloor H_{\text{CSS}} \times DPR \rfloor$$
Crucially, inline CSS style dimensions are never altered dynamically during scaling recalculations. This decoupling strictly prevents the infinite container expansion loops commonly encountered when placing HTML5 canvases inside CSS Flexbox or Grid layouts.
4. Real-Time Sonification Audio Pipeline
Drawing strokes trigger sonified audio pulses synthesized via the Web Audio API. The fundamental frequency $f_i$ is mapped linearly from the normalized vertical cursor height $y_i \in [0, H_{\text{canvas}}]$ according to:
$$f(y_i) = f_{\min} + \left(1 - \frac{y_i}{H_{\text{canvas}}}\right) \cdot (f_{\max} - f_{\min})$$
Each stroke node creates a temporary OscillatorNode connected to a GainNode. The audio gain envelope $A(t)$ follows an instantaneous attack and exponential decay curve:
$$A(t) = A_0 \cdot \exp\left( -\frac{t - t_0}{\tau} \right)$$
where $A_0 = 0.18$ and decay constant $\tau = 0.15 \text{ seconds}$.