HTML5 Canvas is a drawing interface that provides primitives for shapes, paths, transformations, and — most important for today — direct access to pixel data in the browser. Lately, I have wanted to display warped versions of dynamic browser graphics, and this is a perfect fit. In this article, I explore deforming a single triangle, essentially via barycentrically interpolated “texture mapping” from one HTML5 Canvas to another.
This article has four parts: The input controls, the output controls, the pixel pushing, and the math. The input and output are basic combinations of KineticJS and KnockoutJS, the pixel pushing is done via low-level HTML5 Canvas methods, and the math appendix describes barycentric coordinates and texture mapping very briefly. I also make free use of jQuery and Underscore aka “
$” and “