. Real-time drawing and path optimization in HTML5 Canvas 2D Context
The core of the sketchpad/drawing tool that runs on a web browser is direct control of the 2D rendering context (CanvasRenderingContext2D) provided by the HTML5 Canvas API.
Detects coordinate movement events (pointermove) caused by a mouse or touch device in milliseconds, and reflects consecutive coordinate points as a smooth path (Path2D) in the drawing area.
Our system completely eliminates unnecessary repaint processing in order to maximize drawing performance. It uses an incremental drawing algorithm that locally renders only the corresponding line segment at the moment a drawing instruction is issued, so there is no frame rate drop at all even in high-resolution display environments.
Smooth pen stroke correction using Bezier curves and anti-aliasing
A particular problem that tends to occur in hand-drawn input is angular strokes and camera shake caused by the input device's sampling frequency.
This system applies quadratic and cubic Bézier curve interpolation operations to continuous input coordinates in real time.
By generating smooth curves using each intermediate coordinate as a control point, you can achieve smooth, beautiful, and uniform pen strokes comparable to professional paint software, even when using a quick mouse operation or drawing with a fingertip.
In addition, by performing anti-aliasing processing on a sub-pixel basis, the occurrence of jaggies (serrations) can be fundamentally prevented.
Layer composition processing using browser memory (OffscreenCanvas)
It is equipped with OffscreenCanvas and multi-layer compositing models as technologies that support the drawing of complex sketches and images.
The background image, grid lines, draft layer, and main writing layer are maintained in memory as independent canvas buffers, and the composition mode (globalCompositeOperation) is used to instantly superimpose them.
This architecture makes it possible to instantly recall and restore the canvas buffer in the desired history state from memory, without performing heavy recalculations, even when performing eraser functions or undo/redo stack operations.
Fully local secure processing and image data (PNG/JPEG/SVG) export
All drawn illustrations, sketch data, and loaded background images are processed only in your browser's internal memory (V8 engine heap area).
Due to its structure, drawing data and image files are never sent or saved to an external web server.
The completed work can be instantly downloaded and saved to the local environment as an image file in the reversibly compressed PNG format or the general-purpose JPEG format using the HTMLCanvasElement.toDataURL() method.
You can use it with confidence to create highly confidential handwritten notes and sketches of internal ideas.
Mobile Touch Events (Pointer Events) and Pen Pressure Sensitivity Control
To maximize operability on smartphones and tablets (iPad/Android), it is fully compatible with the latest W3C Pointer Events API.
The differences between touch input, stylus pen (Apple Pencil, etc.), and mouse operations are highly abstracted, completely preventing malfunctions during multi-touch.
When using a stylus pen, the pen pressure data transmitted from the PointerEvent.pressure property is obtained in real time and dynamically reflected in the pen thickness (lineWidth) and transparency (globalAlpha), making it possible to express delicate pen pressure.
Frequently Asked Questions (FAQ)
Q1. Are there any concerns that my sketches and images will be saved on an external server?
A1. Not at all. All drawing operations and image generation are completed only in the internal memory of your device (browser). Data is not sent externally via the network, so you can use it with confidence even when sketching confidential ideas or creating private illustrations.
Q2. Can I draw with Apple Pencil on my smartphone or iPad tablet?
A2. Yes, it is fully supported. Since it supports the Pointer Events API, it is possible to detect pen pressure with a stylus pen such as Apple Pencil, and smoothly perform touch drawing with a finger.
Q3. Is there an Undo or Reset function?
A3. Yes, there are "Undo", "Redo", and "Clear" buttons on the on-screen toolbar. Since the drawing history of up to several dozen previous drawings is held in memory, you can draw freely through trial and error.