Question

I am new to HTML5.

With a typical element and something like jQuery I am typically able to access its value with

$("#elem").val();

EDIT:
say i write "abcd" in the canvas element ..i want to be able to “store” “abcd” in a database somewhere…

if it were pure text i would access it as shown above with jquery but with a drawing im not sure how it would work?

how do i achieve the same result with a canvas element? and what format can i expect the result in? Would I have to get an array of all x,y coordinates and parse that some how? do i get an image?

Thanks for your help!

Answer 1

You can use the getImageData() method. This returns an ImageData object. ImageData contains a width property, a height property and a CanvasPixelArray object which is essentially a bitmap. ImageData is probably most useful for loading data back into a canvas (using the putImageData() method), but you can also examine the raw data of the pixel array if you so desire.

You can read more about ImageData here.

And you can read about canvas pixel manipulation here.

---

It appears that I may have misunderstood your question. If by storing “abcd” in your database, you wish to store the bitmapped image, then you simply need to extract the pixel data and then store it as a BLOB or similar object. This is what I assumed you meant.

If however you wish to store the actual text “abcd” in your database, you are going to have a much more difficult time. You need to think of canvas as a literal canvas. Once you put something on it, it becomes part of the image. It isn’t like SVG where specific components can be extracted back out again. Canvas is essentially a bitmap image, so if you wish to extract textual data from it without having access to the design algorithm you would have to use some sort of OCR algorithm (which would of course be highly unadvisable).

If you do indeed wish to extract textual data, I recommend that you take a look at SVG which is more flexible in some respects. MDN has a series of fairly comprehensive articles on the subject.