Canvas element
The HTML canvas element is a scriptable bitmap drawing surface in a web document for rendering graphics.
Web Components in Action
- How it is used
- Serves as the drawing surface for component-based 3D scenes and processed video frames.
- How deep it goes
- Shows canvas placement, engine setup, refresh timing, and pixel filtering, but leaves low-level drawing largely to libraries and components.
- Examples
- Uses a Babylon.js 3D scene and live-camera black-and-white and “snow” filters.
- What you can do after
- Apply it via Babylon.js or video components to render a scene or alter displayed camera frames.
D3.js in Action, Third Edition
The Canvas API is the browser scripting interface for drawing on and reading from an HTML canvas bitmap.
- How it is used
- Renders dense or animated data visualizations when SVG would add too many DOM elements.
- How deep it goes
- Builds responsive high-density 2D setup and interaction strategies, while deferring WebGL and 3D graphics.
- Examples
- Recreates a shape gallery and uses hidden uniquely colored painting circles to detect hover targets.
- What you can do after
- Build it from scratch as a responsive 2D drawing surface and add color-based hover detection.
Read how D3.js in Action, Third Edition explains canvas element →
Get Programming: Learn to code with Python
- How it is used
- Provides a drawing area for placing game shapes in a Tkinter window.
- How deep it goes
- Defines the canvas as a rectangular widget and demonstrates colored rectangles, but stops short of detailing its full drawing API.
- Examples
- Uses two randomly positioned, differently sized player rectangles in a tag game.
- What you can do after
- Build it from scratch by adding a canvas to a Tkinter window and placing shapes on it.
Read how Get Programming: Learn to code with Python explains canvas element →
Get Programming with JavaScript Next: New features of ECMAScript 2015, 2016, and beyond
An HTML element that provides a scriptable bitmap drawing surface for web graphics.
- How it is used
- Uses a canvas and its 2D context to paint images for a web gallery.
- How deep it goes
- Explains context setup, image drawing and alpha-based fading, without detailing canvas internals.
- Examples
- Draws an image across a gallery canvas, then fades it in by increasing alpha over animation frames.
- What you can do after
- Apply the Canvas 2D context to draw images and create a fade-in effect.
Related concepts
- JavaScriptuses · JavaScript is a high-level, dynamically typed, multi-paradigm programming language standardized as ECMAScript and used for web and general-purpose programming.
- Document Object Modelcontrasts with · The Document Object Model (DOM) is a standard programming interface that represents a document as a structured tree of objects and provides ways to access and modify its content and structure.
- SVGalternative to · SVG, or Scalable Vector Graphics, is an XML-based standard and file format for describing scalable, resolution-independent two-dimensional vector graphics.
- getImageData()has part · getImageData() is a Canvas 2D context method that returns pixel data for a specified rectangular region of a canvas.
- hit testinguses · Hit testing is the process of determining whether a point or pointer location lies within a graphical object's boundaries or region.
These guides are generated from the text of Manning books by Manning's knowledge graph and link to the sections they draw on. The full books are available on liveBook and at manning.com.