Rendering PDF in HTML5 Canvas

pdf.js is an HTML5 technology experiment from Mozilla that explores building a faithful and efficient Portable Document Format (PDF) renderer using Canvas without any native code support. The goal of the project is to create a general-purpose, web standards-based platform for parsing and rendering PDFs, and eventually to release a PDF reader extension powered by pdf.js. Integration with Firefox is a possibility if the experiment proves successful.

Read More

Drawing Trees in Canvas

Lately I’ve been experimenting with the new HTML5 Canvas element, and the best way to learn some new technology is to create something in it. For some time I’ve been dabbling in Processing and thought of porting some algorithms there in Canvas.
Rather than jumping into animation it was better to play around with static structures. I’ve a soft spot for visualizations so I decided to port some algorithms for creating recursive tree structures.

Read More

Pixelation of images using HTML5 Canvas

Close Pixelate is a Javascript library created by David DeSandro that converts an image into a pixelated version using an HTML5 canvas element. The library works with all browsers supporting HTML5 canvas. You can view the online demo below.

The function takes various options, which you can tweak to your taste to render the final image.

  • resolution : The distance in pixels between rendered pixels. Required.
  • shape : The shape of the pixel. Accepts square, circle, and diamond. Optional. Defaults to square.
  • size : The size in pixels of the rendered pixel. Optional. Defaults to value of resolution.
  • offset : Offset in pixels. Optional. Defaults to 0. Can be a single value 15 for a diagonal offset, or an array or object for X/Y pairs: [ 15, 5 ] or { x: 15, y: 5 }.
  • alpha : A decimal value for the opacity of the rendering. Optional. Defaults to 1.

You can download the code from GitHub.

image pixelation

Read More

Export Illustrator art to HTML5 canvas

AI-Canvas plug-in enables Adobe Illustrator to export vector and bitmap artwork to an HTML5 canvas element, which can then be rendered in a canvas-enabled browser. The plug-in provides drawing, animation and coding options such as events so that you can build interactive, well-designed canvas-based web apps. This is a wonderful tool if you are just starting with HTML5 canvas, helping to decrease the learning curve. This can really come in handy for people like myself who are not really into graphics programming.

Read More