PUBLIC MARKS with tag canvas

You’ve already learned about the video and canvas elements, but did you know that they were designed to be used together? In fact, the two elements are absolutely wondrous when you combine them! I’m going to show off a few super-simple demos using these two elements, which I hope will prompt cool future projects from you fellow web authors. (All of these demos work in every modern browser except Internet Explorer.)

By combining the capabilities of the video element with a canvas, you can manipulate video data in real time to incorporate a variety of visual effects to the video being displayed. This article, adapted from this blog post by Paul Rouget, demonstrates how to perform chroma-keying (also known as the "green screen effect") using JavaScript code.

Code Schnipsel für alles

Canvas Spielwiese MMM

jQuery.fracs determines some fractions for an HTML element (visible fraction, fraction of the viewport, ...) and also provides the coordinates of these areas. As a bonus there is a page outline feature as seen on the right.

Fabric.js is a framework that makes it easy to work with HTML5 canvas element. It is an interactive object model on top of canvas element. It is also an SVG-to-canvas parser.

A script for grabbing the dominant color or color palette from an image. Uses Javascript and the canvas tag to make it happen.

A js library which helps adding retro and vintage effects to images using the HTML5 canvas element