Skip to main content
SimilarExport ZIP
100%

Drawing pad

✓ Published1🌍 Public
CCora
Last edited Jan 31, 2025
Created on Jan 25, 2025
Forked from Sunset on Fundy

This interactive drawing application allows users to paint freeform strokes on a Canvas element. It uses a toolbar to select stroke color and line width, and includes a clear button to reset the drawing surface. The code uses the Canvas `getContext`, `lineTo`, and `stroke` methods to render paths as the user drags the mouse, with the canvas resizing to fit the window. The interface is styled with CSS flexbox and a gradient title.

AI-generated description

A bare minimum HTML page.

MIT Licensed

Similar vizzes

Loading thumbnail…

Javascript

This example demonstrates a basic canvas-based drawing application. Users can sketch freehand on the canvas by dragging the mouse, with sliders and color pickers to adjust pen width and color. The code uses JavaScript with the HTML5 Canvas API, including methods like `ctx.lineTo`, `ctx.stroke`, and `ctx.clearRect` to manage drawing and erasing. It is a direct illustration of interactive vector graphics in the browser, independent of D3.js.

SShane Carey
74% match
Loading thumbnail…

Line Drawing

This example demonstrates freehand line drawing through mouse drag interaction. A user presses and holds to create a smooth, flowing path rendered as an SVG stroke on a white canvas. The interaction is built using `d3.drag` to capture pointer events, while `d3.line` with the `d3.curveBasis` curve generates the smooth B-spline path through the collected points. The path elements are appended directly to the SVG container, and the code styles them with a black, three-pixel-wide stroke for a clear visual result.

Mmbostock
72% match
Loading thumbnail…

Etch-A-Sketch

An interactive drawing application that recreates the classic Etch-A-Sketch toy in the browser. Users navigate a drawing cursor with arrow keys or WASD controls, while additional keyboard shortcuts adjust line thickness, cycle through six draw colors, and toggle drawing on and off. The application renders an SVG line path using React state management, with the drawing path constructed incrementally as the cursor moves across a 960 by 500 pixel canvas.

NNicholas Smith
66% match
Loading thumbnail…

p5JS

In this interactive visualization, users draw freehand with the mouse, and their drawing is recreated as an animated series of rotating epicycles. The application uses the p5.js library to handle canvas rendering, mouse input, and animation. After the drawing is complete, the code computes its Discrete Fourier Transform to decompose the path into a set of frequency components, then sorts them by amplitude and reconstructs the shape using circular motion. The output shows both the tracing circles and the resulting magenta path being redrawn over time.

TTanmay Bishnoi
66% match
Loading thumbnail…

Fork of HTML Starter

This interactive canvas app generates Bob Ross–style landscape paintings. Each click produces a randomized scene with layered mountains, clouds, a lake, forests, trees, and possibly a cabin, using HTML5 Canvas drawing APIs within JavaScript. The painting process works from background to foreground, and a new inspirational quote accompanies every generated artwork. The interface includes buttons to trigger a new painting or clear the canvas.

NNita
65% match
Loading thumbnail…

Free Hand Line D3 v4

This example demonstrates freehand line drawing in an SVG canvas. The visualization begins with a pre-generated curve and prompts the user to drag the mouse anywhere to create additional paths. It uses D3 v4's drag behavior and line generator with a basis curve to smoothly interpolate the points collected during the drag. The rendered path is styled as a tomato-colored dashed stroke, and the code creates the SVG container dynamically on the page.

CChandrakantThakkarDigiCorp
65% match
Loading thumbnail…

Fork of HTML Starter

This example displays a gallery of basic geometric shapes drawn on a responsive HTML5 Canvas, including filled and outlined rectangles, circles, triangles, lines, ellipses, rounded rectangles, and a star. The canvas uses the Canvas 2D API with methods like `fillRect()`, `arc()`, and `quadraticCurveTo()` to render each shape. The drawing routine redraws all shapes whenever the window is resized, adapting the layout to the available screen space.

KKareena
64% match
Loading thumbnail…

Untitled

This example demonstrates an interactive coloring book application built with the React framework and rendered on HTML Canvas. Users select colors from a customizable palette and apply them to images using a brush tool, with an eraser option and adjustable brush size. The component is implemented as a custom HTML element using JavaScript's Custom Elements API and relies on jQuery for DOM manipulation. Images are stored as static assets, and the interface includes navigation thumbnails, undo, clear, save, and print functions. The styling is controlled through CSS overrides, allowing for theme customization.

Sslawson48
64% match