Hello Canvas

100%

✓ Published2🌍 Public

Last edited Sep 19, 2019

Created on Sep 19, 2019

This example shows an HTML5 canvas that fills its entire 960-by-500 pixel area with a solid red rectangle. The code acquires a 2D drawing context using the canvas `getContext` API, sets the `fillStyle` to red, and calls `fillRect` to cover the full canvas bounds. It serves as a minimal starter template for rendering graphics, with CSS that removes page margins and hides overflow for an immersive full-window display.

AI-generated description

HTML5 Canvas starter code.

From "Mathematical Patterns" tutorial given at MIT on July 28, 2013.

MIT Licensed

Similar vizzes

Loading thumbnail…

Blank Canvas!

This example demonstrates a blank, responsive canvas that fills the entire browser window. The visualization is an empty SVG surface with a large rounded rectangle covering its full dimensions, creating a minimalist starting point. The code uses D3 v5's `select` function to target the SVG element, sets its width and height based on the viewport, and appends a `rect` with a corner radius of 40 pixels. The fixed positioning and hidden overflow in the CSS ensure the canvas remains stable and fully visible.

MMuhammad Jarir Kanji

73% match

Loading thumbnail…

testejs

This example demonstrates a minimal web page that combines HTML, CSS, and JavaScript with canvas rendering. It displays a large “Hello HTML!” message while also drawing a red rectangle and a series of horizontal grid lines on a canvas element using the Canvas 2D API. A separate “Hello world!” text is injected into a div via `document.getElementById` and `textContent`. The source code uses vanilla JavaScript with no external libraries, showing basic canvas drawing commands like `fillRect` and `stroke`.

RRomersims

72% match

Loading thumbnail…

Hello Html

This example presents a minimal HTML page that renders a single red circle inside an SVG element. The page sets the body margin to zero and hides overflow, creating a clean canvas for the graphic. The code uses a basic SVG `<circle>` tag with a radius of 200 and a red fill, positioned within a 500-by-1000 pixel viewport. It demonstrates the foundational interplay of HTML structure, inline CSS styling, and the SVG rendering API. The example serves as a starting point for more complex web-based visualizations.

FFrictionlessman

72% match

Loading thumbnail…

Blank Canvas

This example shows a full-screen, rounded rectangle that fills the browser window with a solid teal color, creating a minimal blank canvas. The visualization uses D3 v5 to select the SVG element and dynamically size it to the viewport dimensions. A single `<rect>` is appended and styled with a 40-pixel corner radius and a muted blue-gray fill, with the body fixed to prevent scrolling.

CCassie

71% match

Loading thumbnail…

p5.js example

This example displays a static red canvas with a single black ellipse at its center. The page is built with a minimal HTML structure and styled with CSS to remove default margins and padding. The sketch uses the p5.js library, specifically the `createCanvas`, `background`, and `ellipse` functions within the `setup` and `draw` calls. The code currently contains commented-out sections for loading and processing CSV data, but they are not active in this version.

BBhumika Srinivas

71% match

Loading thumbnail…

Blank Canvas

This example presents a blank, rounded-corner rectangular canvas that fills the entire browser viewport. The visualization uses D3 v5 to create a single SVG `rect` element, with dimensions dynamically calculated from the `document.body.clientWidth` and `clientHeight` properties. The canvas is styled with a fixed, full-screen layout, and the D3 `select` function targets the SVG element to set its width and height, demonstrating a minimal setup for responsive SVG rendering.

Ccheeson

70% match

Loading thumbnail…

Untitled

This example displays a blank 500-by-500 pixel SVG canvas with a solid red background. The code uses D3.js to select the SVG element via `d3.select` and applies the background color with `style`. The visualization is minimal, showing only the rendering setup with an SVG container and a red fill. It does not include any data, marks, or interaction, serving as a basic scaffold for further development within a React-based project using D3.

CCodeGenerato

70% match

Loading thumbnail…

making a canvas!

This example demonstrates how to create a full-screen interactive canvas using D3 v5 and SVG rendering. The visualization fills the browser viewport with a single rounded rectangle, responding to the window dimensions by setting the SVG width and height attributes dynamically. The code uses D3’s `select` function to target the SVG element and appends a `<rect>` element with a 40-pixel corner radius. The stylesheet ensures the body has no margins and prevents overflow, making the canvas occupy the entire display area.

Ffernandotsurukawa

70% match