Experiment with the HTML5 Canvas 2D API by writing draw commands and seeing instant visual output.
Canvas API Playground provides a live canvas for trying Canvas 2D drawing commands and seeing the resulting pixels. Commands are applied in sequence, so later shapes can cover earlier ones and drawing state such as colors, line widths, transforms, and clipping can affect subsequent operations. A frequent surprise is the coordinate system: the origin is at the upper-left corner, with x increasing to the right and y increasing downward. The entered commands and rendered result remain in the browser.
The Canvas 2D context keeps state including fill and stroke styles, line settings, transforms, text settings, clipping regions, and compositing behavior. Changing a property affects later drawing operations. save() records the current state and restore() returns to the most recently saved state, which is useful when a transform or style should apply to only part of a drawing.
Path commands such as moveTo() and lineTo() define geometry but do not display it until an operation such as stroke() or fill() is called. beginPath() starts a new current path. Methods such as fillRect() paint immediately without changing that path. clearRect() removes pixels in an area but does not reset styles, transforms, or the current path.
The current path can retain previously defined subpaths. Each call to stroke() paints the entire current path, not only the most recently added segment. Call beginPath() before defining an independent shape. closePath() is different: it connects the current subpath back to its starting point, but it does not discard existing path data.
No. The playground shows what the current browser produces. Font availability, device pixel ratio, color handling, antialiasing, and implementation differences can change details elsewhere. Use the result to validate command order and geometry, then test the target browsers and display sizes when exact appearance matters.
The behavioral notes were checked against the browser implementation. Standards and primary references below define the relevant format, formula, or platform behavior.
Format, validate, and beautify JSON with syntax highlighting and error detection.
Encode text or files to Base64 and decode Base64 strings back to their original form.
Format and indent SQL queries for better readability across all major dialects.
Convert HTML markup into clean Markdown syntax with support for tables and lists.
Write Markdown and see the rendered HTML output in real time with live preview.
Visualize unified diffs and patch files with color-coded additions and deletions.