Simon Willison's Weblog: canvas

Animating Rick and Morty One Pixel at a Time

2025-02-04T20:53:29+00:00

Animating Rick and Morty One Pixel at a Time

Daniel Hooper says he spent 8 months working on the post, the culmination of which is an animation of Rick from Rick and Morty, implemented in 240 lines of GLSL - the OpenGL Shading Language which apparently has been directly supported by browsers for many years.

The result is a comprehensive GLSL tutorial, complete with interactive examples of each of the steps used to generate the final animation which you can tinker with directly on the page. It feels a bit like Logo!

Shaders work by running code for each pixel to return that pixel's color - in this case the color_for_pixel() function is wired up as the core logic of the shader.

Here's Daniel's code for the live shader editor he built for this post. It looks like this is the function that does the most important work:

function loadShader(shaderSource, shaderType) {
    const shader = gl.createShader(shaderType);
    gl.shaderSource(shader, shaderSource);
    gl.compileShader(shader);
    const compiled = gl.getShaderParameter(shader, gl.COMPILE_STATUS);
    if (!compiled) {
        const lastError = gl.getShaderInfoLog(shader);
        gl.deleteShader(shader);
        return lastError;
    }
    return shader;
}

Where gl is a canvas.getContext("webgl2") WebGL2RenderingContext object, described by MDN here.

Via lobste.rs

Tags: animation, canvas, javascript, webgl

Instant colour fill with HTML Canvas

2023-05-24T01:27:00+00:00

Instant colour fill with HTML Canvas

Shane O'Sullivan describes how to implement instant colour fill using HTML Canvas and some really clever tricks with Web Workers. A new technique to me is passing a canvas.getImageData() object to a Web Worker via worker.postMessage({action: "process", buffer: imageData.data.buffer}, [imageData.data.buffer]) where that second argument is a list of objects to "transfer ownership of" - then the worker can create a new ImageData(), populate it and transfer ownership of that back to the parent window.

Via Hacker News

Tags: canvas, javascript, webworkers

μPlot

2019-10-14T23:03:56+00:00

μPlot

“An exceptionally fast, tiny time series chart. [...] from a cold start it can create an interactive chart containing 150,000 data points in 40ms. [...] at < 10 KB, it’s likely the smallest and fastest time series plotter that doesn’t make use of WebGL shaders or WASM”

Via @mikeal

Tags: canvas, charting, graphing, javascript

Zdog

2019-05-28T21:59:27+00:00

Zdog

Well this is absolutely delightful: Zdog is a pseudo-3D engine for canvas and SVG that outputs 3D models rendered as super-stylish flat shapes. It’s hard to describe with words—go play with the demos!

Via Dave DeSandro

Tags: 3d, canvas

VoxelSpace

2017-11-24T19:30:56+00:00

VoxelSpace

Lovely clear explanation of the voxel space landscape rendering technique used by NovaLogic for Comanche back in 1992, including a working JavaScript demo plus pseudo-code in Python.

Via Hacker News

Tags: canvas, javascript

PaintbrushJS

2010-10-09T11:53:00+00:00

PaintbrushJS

Impressive open source JavaScript library from Dave Shea for applying image filters (sharpen, blur, emboss, greyscale etc) to the canvas element.

Tags: canvas, dave-shea, javascript, recovered

canto.js: An Improved HTML5 Canvas API

2010-07-29T09:39:00+00:00

canto.js: An Improved HTML5 Canvas API

Improved is an understatement: canto adds jQuery-style method chaining, the ability to multiple coordinates to e.g. lineTo at once, relative coordinate methods (regular Canvas does everything in terms of absolute coordinates), the ability to use degrees instead of radians, a rounded corner shortcut, a more convenient .revert() method and a simple parser that can understand SVG path expressions! The only catch: it uses getters and setters so won’t work in IE.

Via Ajaxian

Tags: canvas, html5, javascript, svg, recovered, canto, david-flanagan

Music Notation with HTML5 Canvas

2010-05-12T08:53:00+00:00

Music Notation with HTML5 Canvas

A pretty decent effort at rendering musical notation using JavaScript and the canvas element.

Tags: canvas, javascript, music, recovered

Blowing up HTML5 video and mapping it into 3D space

2010-04-21T09:30:11+00:00

Blowing up HTML5 video and mapping it into 3D space

The canvas drawImage() method can take an HTML video element as its source, making all kinds of interesting effects possible. The author notes that performance was dramatically improved by copying the video frame in to a separate canvas element and then copying regions out of that element rather than grabbing regions from the video directly.

Tags: canvas, html5, seanchristmann, video

Flash CS5 will export to HTML5 Canvas

2010-04-11T18:33:01+00:00

Flash CS5 will export to HTML5 Canvas

This looks pretty awesome—Illustrator CS5 and Flash CS5 can export to a new “FXG” format, and Adobe are providing a JavaScript library to load that format via Ajax and render the contents (including Flash animations) in a canvas element. Could be great for displaying newspaper infographics on the iPad.

Tags: adobe, canvas, flash, fxg, html5, illustrator, ipad, iphone

Internet Explorer Platform Preview Guide for Developers

2010-03-16T18:36:38+00:00

Internet Explorer Platform Preview Guide for Developers

Lots of SVG and CSS3 stuff, no mention of canvas here either though.

Via IE testdrive preview release notes

Tags: canvas, css3, html5, ie9, internet-explorer, microsoft, svg

An Early Look At IE9 for Developers

2010-03-16T18:11:25+00:00

An Early Look At IE9 for Developers

Surprisingly, no mention of SVG or canvas and only a note in passing about HTML 5.

Via Jeffrey Zeldman

Tags: canvas, html5, ie9, internet-explorer, microsoft, svg

Quoting Larry Masinter

2010-02-15T21:31:02+00:00

No part of HTML5 is, or was ever, "blocked" in the W3C HTML Working Group -- not HTML5, not Canvas 2D Graphics, not Microdata, not Video -- not by me, not by Adobe. Neither Adobe nor I oppose, are fighting, are trying to stop, slow down, hinder, oppose, or harm HTML5, Canvas 2D Graphics, Microdata, video in HTML, or any of the other significant features in HTML5. Claims otherwise are false. Any other disclaimers needed?

— Larry Masinter

Tags: adobe, canvas, html5, larry-masinter, w3c

Quoting Ian Hickson

2010-02-15T19:38:29+00:00

At this point all I could honestly tell you from the point of view of the editor of several of the HTML5 documents being held up is that the W3C have said they're won't publish without the objections being resolved, and that the objection is from Adobe. I can't even tell what I could do to resolve the objection. It seems to be entirely a process-based objection.

— Ian Hickson

Tags: adobe, canvas, hixie, html5, ian-hickson, process, w3c

Lou's Pseudo 3d Page

2010-02-08T11:21:18+00:00

Lou's Pseudo 3d Page

Spectacularly detailed exploration of the road graphics used in racing games prior to true 3D. This is a potential gold mine for anyone looking for a fun project to try out with canvas. Bonus points for comet integration—I’m still looking forward to the first real-time multiplayer game in the browser using comet and canvas.

Tags: 3d, canvas, comet, game-design, graphics, html5, javascript

Sketchpad - Online Paint/Drawing application

2010-02-07T10:45:51+00:00

Sketchpad - Online Paint/Drawing application

Impressive canvas based bitmap drawing tool with an extremely smooth UI.

Via Design News @ ColorJack

Tags: canvas, sketchpad

jQSlickWrap

2009-11-23T07:44:41+00:00

jQSlickWrap

Clever jQuery plugin which allows text to wrap around irregularly shaped images, by processing the image with canvas and rewriting it as a sequence of floated horizontal bars of different widths. It’s a a modern variant of the the ragged float trick first introduced by Eric Meyer.

Tags: canvas, css, eric-meyer, float, jquery

cloud-crowd

2009-09-21T23:09:04+00:00

cloud-crowd

New parallel processing worker/job queue system with a strikingly elegant architecture. The central server is an HTTP server that manages job requests, which are farmed out to a number of node HTTP servers which fork off worker processes to do the work. All communication is webhook-style JSON, and the servers are implemented in Sinatra and Thin using a tiny amount of code. The web-based monitoring interface is simply beautiful, using canvas to display graphs showing the system’s overall activity.

Tags: canvas, cloudcrowd, http, json, message-queues, ruby, sinatra, thin, webhooks, workers

Dive Into HTML 5

2009-08-20T14:40:23+00:00

Dive Into HTML 5

Mark Pilgrim’s free online book on HTML 5—currently just one chapter on canvas (which neatly illustrates the coordinate system using a diagram rendered using canvas itself) but certain to become an invaluable resource for anyone looking to take advantage of HTML 5.

Tags: books, canvas, html5, mark-pilgrim, web-standards

Firefox 3.5 for developers

2009-06-30T18:08:34+00:00

Firefox 3.5 for developers

It’s out today, and the feature list is huge. Highlights include HTML 5 drag ’n’ drop, audio and video elements, offline resources, downloadable fonts, text-shadow, CSS transforms with -moz-transform, localStorage, geolocation, web workers, trackpad swipe events, native JSON, cross-site HTTP requests, text API for canvas, defer attribute for the script element and TraceMonkey for better JS performance!

Tags: audio, browsers, canvas, crossdomain, csstransforms, dragndrop, firefox, firefox35, fonts, geolocation, html5, javascript, json, localstorage, mozilla, offlineresources, performance, textshadow, tracemonkey, video, webworkers

Browsing my browsing

2009-04-10T08:48:47+00:00

Browsing my browsing

Roo Reynolds used the MeeTimer Firefox extension to gather statistics on his browsing habits, then extracted data directly from the SQLite database and generated his own graphs using PHP and the canvas element.

Tags: canvas, firefox, javascript, meetimer, php, rooreynolds, sqlite

Protovis

2009-04-10T08:43:56+00:00

Protovis

JavaScript graphing library based on canvas, with an elegant chaining style API.

Tags: canvas, graphs, javascript, protovis, visualisation

cufon

2009-04-06T22:29:47+00:00

cufon

A promising alternative to sIFR, cufon uses VML on IE and canvas on other browsers to render custom fonts in the browser. You have to convert your font to JavaScript first, either using their free hosted tool or by installing the FontForge based server-side script yourself. The JavaScript encoded font file uses VML primitives to improve IE performance; the JavaScript library converts that to canvas calls for other, faster browsers.

Tags: browsers, canvas, cufon, fontforge, fonts, internet-explorer, javascript, sifr, typography, vml

Fixing IE by porting Canvas to Flash

2009-03-15T13:34:47+00:00

Fixing IE by porting Canvas to Flash

Implementing canvas using Flash is an obvious step, but personally I’m much more interested in an SVG renderer using Flash that finally brings non-animated SVGs to IE.

Tags: canvas, flash, internet-explorer, svg

jQuery Sparklines

2009-02-27T20:43:04+00:00

jQuery Sparklines

Delightful Sparklines implementation, using canvas or VML in IE. A neat nod towards unobtrusiveness as well: you can specify your data as comma separated values inside a span, then use a single jQuery method call to convert the span in to a sparkline image.

Tags: canvas, gareth-watts, graphs, javascript, jquery, sparklines, vml

OCR and Neural Nets in JavaScript

2009-01-25T00:00:28+00:00

OCR and Neural Nets in JavaScript

John dissects the brilliant Greasemonkey script that solves simple captchas using the canvas element and HTML5’s getImageData API.

Tags: canvas, captchas, getimagedata, greasemonkey, javascript, john-resig, ocr

JSSpeccy

2008-10-29T17:25:01+00:00

JSSpeccy

A ZX Spectrum emulator written in Javascript.

Tags: canvas, emulator, javascript, jsspeccy, matt-westcott, spectrum, zxspectrum

typeface.js

2008-10-27T23:45:30+00:00

typeface.js

Outstanding hack—renders custom fonts using VML in IE and canvas in everything else, using fonts that are defined as a set of vector paths stored using JSON.

Tags: canvas, fonts, javascript, json, typefacejs, typography, vml

Antisocial

2008-10-09T18:42:52+00:00

Antisocial

Matt Westcott (a.k.a. Gasman) provides some technical background to his awesome Antisocial 3D canvas demo.

Tags: 3d, canvas, demoscene, gasman, javascript, matt-westcott

Antisocial: a Javascript demo by Gasman

2008-10-08T15:00:54+00:00

Antisocial: a Javascript demo by Gasman

The demo is cool (3D on top of canvas); the “demotool” editor is simply amazing.

Tags: 3d, antisocial, canvas, demo, demotool, gasman, javascript, matt-westcott