Pixel-based manipulations of images in DOM

As part of a game which I am developing in Javascript I want to:

  1. load an image from a URL
  2. do some pixel-based manipulation to it (do some color filter operations to it, to be precise)
  3. put the manipulated image as an <IMG> node into the dom of the html document

I already have a good idea how to do the first two parts - I am just going to draw the image to an invisible canvas. But how can I do the last one?

I thought about extacting the raw binary data from the canvas and then convert it to a data URL. But this seems quite difficult to me. Isn't there a more direct way to do that? I have jQuery and jQueryUI available, when it helps.


The canvas element has a toDataURL() method that gives you a ready-to-use data URL.

Need Your Help

How to use onchange in HTML

javascript html

I have two text box in html ie:

How do I add an exception to a query that finds the most popular records?

mysql sql

I am building a website where users submit screencasts and associate with them, tags.