image

100%

✓ Published0🌍 Public

Last edited Apr 4, 2012

Created on Apr 4, 2012

This example is a simple image-labeling tool that lets a user load an image into an HTML canvas, add a caption as text, and save the resulting composite as a PNG. The interface provides a file input for selecting an image, a text field for entering a caption, and buttons to apply the caption or open the saved PNG in a new window. The code uses the Canvas 2D API’s `drawImage` and `fillText` methods to render the image and text, and `toDataURL` to export the canvas content.

AI-generated description

Similar vizzes

Loading thumbnail…

canvas marker

This example uses layered PNG images to compose a map marker visualization on an HTML canvas. The code draws a background, optional type-specific overlay, error indicator, and foreground image in sequence using the Canvas 2D API’s `drawImage` method. Each layer is painted onto a dynamically created `<canvas>` element, and the final composite is exported as a data URL via `toDataURL("image/png")`. The rendering relies on jQuery to instantiate the canvas and manage the drawing context, with the marker’s appearance determined by the presence of `this.type` and `error` flags.

Aandrewxhill

68% match

Loading thumbnail…

Gist 890902

This example defines a reusable canvas-based map marker component for the mol.ui framework. It creates a 120x120 pixel canvas element and layers three separate images—background, foreground, and error state—using the Canvas 2D API’s `drawImage` method. The code supports dynamic icon loading via `setIconSrc` and exposes a `getDataURL` method to export the composite marker as a PNG. The rendering approach relies on explicit canvas drawing operations rather than DOM elements, making it suitable for custom map overlays.

Aandrewxhill

65% match

Loading thumbnail…

Image Processing

This example demonstrates real-time image processing on map tiles using Polymaps and HTML5 Canvas. The map loads a static image from a URL and renders it through a custom canvas layer, where each tile’s pixel data is read with `getImageData` and halved in intensity before being written back via `putImageData`. The code uses `po.canvas()` to define the layer, `drawImage` to place the source, and `createImageData` to prepare the output. The result shows a visibly darkened version of the original image across the panning map.

Mmbostock

63% match

Loading thumbnail…

d3.queue image loader

This example demonstrates how to load multiple asynchronous resources before rendering content to a canvas, using `d3.queue` to coordinate a text file and an image. The code defines a custom `d3.imageload` function that wraps the HTML `Image` object, then defers both it and `d3.text` for `hola.txt` and `thumbnail.png`. After both complete, it displays a status message and draws the loaded image onto the canvas using the Canvas API’s `drawImage` method. The page’s body is fixed to fill the viewport, and rendering targets a `canvas` element.

PPhilippe Rivière

63% match

Loading thumbnail…

Gist e9e662643752b1cd6f46767b03eab04d

This example demonstrates how to draw a line graph using the HTML5 Canvas API, adapted from a Japanese presentation on Canvas fundamentals. The code initializes a canvas element, retrieves its 2D rendering context, and then draws a framed plotting area with gridlines, data points as arcs, text labels, and connecting line segments. It uses core Canvas methods such as `strokeRect`, `arc`, `fillText`, and `moveTo`/`lineTo`, along with `save` and `restore` to manage drawing states. The visualization is rendered directly to canvas with no external charting library, though the slides reference Chart.js and D3.js as alternatives.

MMiyaton

63% match

Loading thumbnail…

send image to google vision endpoint

This example shows a client-side web application that sends a canvas-rendered image to a Google Vision endpoint and displays the recognized labels in the page. It first captures the canvas content as a PNG dataURL using `toDataURL('image/png')`, then posts that data along with a selected course language value via `fetch` to the server. The response is an array of words, which the code maps into HTML list items showing each recognized term and its associated language. The rendering uses plain DOM manipulation with `innerHTML`, and the request/response cycle relies on standard JavaScript Promises.

VVeronicaM

62% match

Loading thumbnail…

Gist fba5514afb352314a04795e168f3a0ba

This example demonstrates a set of reusable helper functions for drawing and manipulating shapes on an HTML canvas. It shows utility functions for creating lines, triangles, and rectangles, as well as geometric operations like panning, resizing, and checking whether one rectangle contains another. The code relies on the Canvas API's `beginPath`, `moveTo`, `lineTo`, `stroke`, and `rect` methods, along with standard DOM manipulation methods such as `document.querySelector`, `createElement`, and `addEventListener`. The rendering approach is direct canvas drawing, with no external data source or visualization library involved.

Aalex-milanov

62% match

Loading thumbnail…

Save SVG as PNG

This example demonstrates a workflow for converting a dynamically generated D3 SVG into a static PNG file, ensuring pixel-perfect consistency between the two. The process first uses the SVG Crowbar bookmarklet to extract the SVG from the browser, then loads that SVG into an HTML page with a Canvas element, drawing it via the Canvas API’s `drawImage` method. Finally, the canvas’s `toDataURL` method exports the rendered image as a PNG, which is automatically downloaded using an anchor element with a `download` attribute.

Mmbostock

62% match