Drawing Canvas (PNG/JPEG)

The core of drawing in this tool is pixel manipulation using the <canvas> element provided by HTML5 and the 2D rendering context (CanvasRenderingContext2D).

Upon initial loading of the tool, a canvas area with an internal resolution set to 1000 pixels in width and 600 pixels in height is generated on the browser.

This aspect ratio (5:3) is fixed, and even if the display size is reduced or enlarged according to the user's screen size or window width, the internal coordinate system of the canvas is designed to always maintain 1000x600.

In the initial state, which serves as the starting point for drawing, a process is executed to fill the entire background with a white (#ffffff) rectangle (fillRect).

As a result, a plain white canvas with no transparency information is prepared and recorded in the browser's memory as the first history state.

Additionally, to acquire coordinates when the user touches the canvas, the getBoundingClientRect method is used to obtain the display position and actual size of the element on the screen, inserting a process to calculate the ratio with the internal resolution for both touch and mouse inputs.

This calculation formula compensates for deviations between the pointer or finger touch position and the internal pixel coordinates of the canvas, even if the apparent size has changed due to browser zoom functions or responsive placement, enabling you to start drawing accurately from the intended position.

All such coordinate calculation processes are performed within the browser.

As adjustment functions for brushstrokes in drawing, this tool provides a UI where two parameters, pen thickness (brush size) and opacity, can be changed via slider operations.

Pen thickness can be specified in 1-pixel increments within a range from 1 pixel up to a maximum of 80 pixels. When the user moves the slider, the React state is updated, and the brush setting change is applied to the Canvas lineWidth when starting the next stroke.

Opacity can be specified as a value from 1% to 100%, controlling the shading of pixels on the canvas through the globalAlpha property applied during drawing.

Layering lines with reduced opacity allows for expressions where colors overlap like watercolors. Furthermore, by specifying round for the lineCap and lineJoin attributes for the ends of drawn lines and the joints between lines, respectively, unnatural angular rendering is prevented even when sharp curves are drawn, realizing smooth strokes.

Regarding drawing colors, in addition to being able to select from 10 pre-prepared color presets (black, red, orange, yellow, green, cyan, blue, purple, pink, white), it is also possible to specify any custom color via a hexadecimal color code (#RRGGBB) using a color picker utilizing the HTML <input type="color">.

These various settings for thickness, transparency, and color are applied to the 2D context just before a drawing event occurs, and it is implemented so that you can visually check the current brush state in the preview area with each setting change.

To assist in correcting drawings, this tool implements an eraser function and an Undo/Redo function. The eraser function is not achieved by "painting over with white" like general paint tools, but by changing the composite mode (globalCompositeOperation) to destination-out.

When you drag on the canvas with this mode enabled, the alpha channel (transparency) of existing pixel data is scraped off, turning it into transparent or semi-transparent pixels, which differs from the initial white background.

The eraser thickness is also linked to the pen thickness slider, allowing for broad erasure within a maximum range of 80 pixels. On the other hand, the Undo and Redo functions use a method of saving the drawing state of the canvas as image data in an array (history stack).

Every time the user releases the mouse button or ends a touch operation (mouseup, mouseleave, touchend), the entire current canvas is converted into a Data URI format string by the toDataURL method and added to the end of the history array.

When you click the Undo button, the current index is moved back by one, and an Image object is generated from the saved past image string and asynchronously redrawn (drawImage) over the entire canvas.

This performs history management by replacing continuous bitmap images in memory without adding complex structures like layers or individual line tracking.

A "Canvas Erase" button is provided as a function to return the entire canvas to its initial state. This clear function uses a standard composite mode (source-over) with full opacity (alpha 1) to paint the entire canvas solid white, providing an opaque white background regardless of previously active composite modes.

As a boundary in history management, this full erase operation is treated as a single drawing action. The state of the canvas immediately after executing a full erase is added to the history stack, so if you accidentally press the full erase button, you can use the Undo button to revert to the state just before erasing.

Note that any new drawing action, including a full erase, will immediately discard any previously undone states (old Undo drawings) ahead of it in the history stack.

The history data saving in this system is strictly performed only within the browser's memory. Vector format path information and layer functions that manage each stroke independently are not implemented, and all drawings are flattened into a single raster image the moment they are finalized, maintaining the standard 1000x600 canvas dimensions.

Therefore, editing functions such as independent selection, deletion of specific strokes, or vector editing are not provided. While undoing an individual line is possible by stepping back through the entire history stack sequentially, you cannot selectively target and remove a specific stroke without also undoing the actions that followed it.

The flat raster nature of the canvas means every action is baked into the pixel data once the mouse is released. The opaque white fill of the clear function serves as a complete reset of these pixels, creating a fresh drawing surface while still existing as a discrete step in your sequential history.

As save (export) formats for drawn illustrations, this tool supports two types: PNG format and JPEG format. By selecting the output format from the drop-down menu and pressing the "Save illustration" button, the browser's internal image generation process begins.

When PNG format is selected, the current state of the canvas is directly converted into a Data URI string (image/png) of a PNG image containing transparency information.

Saving in PNG format allows the eraser marks to be correctly recognized and retained as background transparency when opened in other image editing software, which is useful for applications requiring clear backgrounds.

On the other hand, the process when JPEG format is selected involves handling transparency differently, as JPEG does not natively support an alpha channel.

A dedicated, separate canvas is generated specifically for the JPEG export process, where a solid white background is first applied, and then the current drawing is composited on top of it.

This process makes any transparent areas created by the eraser tool appear as a solid white background in the resulting JPEG file.

This dual approach provides users with the option to preserve their transparency for web usage and overlays via PNG, or to flatten the image against a standard white backdrop for broad compatibility and smaller file sizes via JPEG.

The independent canvas processing for JPEG export prevents transparent pixels from defaulting to black or creating rendering artifacts, presenting the final output exactly as a flattened image should appear.

Users should choose their export format based on their specific requirement for alpha channel preservation or basic image distribution.

The path drawing based on input coordinates, pixel transparency using the eraser, string conversion and memory retention of history data, and final encoding process into PNG or JPEG formats in this tool are all implemented to be executed within the user's browser.

The most critical point to note here is that this tool does not have an implementation to write the created image data or history to persistent storage areas such as the browser's LocalStorage or IndexedDB.

Therefore, if you press the browser's "Reload" button, accidentally close the tab, or navigate to another page while editing, the canvas image data and Undo history array held in the browser's memory are immediately entirely destroyed, resetting to a blank initial canvas.

There is no auto-save function or restore function to resume from where you left off upon your next visit. When performing long-term work or creating important handwritten memos, it is recommended to frequently use the "Save illustration" button to export images to your device's local folder (such as the downloads folder) to prevent data loss due to accidental operations.

The file name is assigned using the system timestamp (milliseconds) at the time of execution, such as sketch_1700000000000.png.

The handling of files with the same name and the save destination depend on browser settings, so please check after saving.