Develop Reference

Clicking area of image to change that area's color

How does one implement functionality similar to the one shown in this gif in a website?
Specifically, the part where the user clicks on a (non-rectangular) area of the image and that area then changes colour.
A long, long time ago when the internet was still young, there was something called image maps. Is that still the preferred approach? I heard about svg, does that provide this type of functionality? What about canvas?

I don't know about image maps to get them in this shape of hit areas.
But I recommend using canvas for these type of applications.

You have multiple options for doing that, being image maps one of them. However, I wouldn't do it with it, nowadays, there are better solutions.
You can either use canvas, as suggested before, for example using a canvas library like http://fabricjs.com/ or, maybe a bit easier, using SVG elements.
The benefit of SVG is that they render as normal DOM elements in a website, so you can debug then in the inspector, attach normal click events to them, style them using CSS, etc.

multiple options for this.
SVGs + CSS
CANVAS animations
FLASH( wouldn't recommend this option.,Pretty outdated)
Plain html css (But this wont be customisable in future for different shapes, a lot of time consuming when compared to other ways and confusing unless written with good documentation.)
html+css way: you can always make most of the geometrical shapes with css and html. But, curves we have svgs to go for and use css/svg transitions for visuals

does HTML5 support any kind of polygonal masking?

I'm curious if it's possible (either with canvas or with CSS) to place a mask over a JPG or PNG to make some part of it transparent. Specifically, I want to define a circle over the image, and for the pixels within that circle to stay opaque, but for all the other parts of the image to become transparent.
I'm Java this is a fairly straight forward operation, but I'm not finding any analog in Javascript and am wondering if this is simply not possible.
TIA

Just check this -webkit-mask tutorial from css tricks.
CSS
.circle-mask {
-webkit-mask-box-image: url(mask.png);
}
RESULT
Related links:
CSS3 -webkit-mask property.
Using an Image as a Mask
-webkit-mask-image

You can also use the mask tag from SVG, to actually place images of circles with different gradients, do tell if this helps?

You can use SVG filters to create something like a »blend mode«. You can use i.e. Inkscape to compose these effects. If you become familiar with the syntax you can create a lot of effects. Perhaps you can post an image of the desired effect, than it should be more easy to see what can be done. There are also some js libraries to make certain effects with images.

Misplaced SVG Path in raphael-svg-import

I'm trying to render these files http://registro.soveci.com/dom_izq.svg and http://registro.soveci.com/dom_der.svg with RaphaelJS and raphael-svg-import, but somehow a path appears misplaced on the screen. If you view it with a standard compliant browser, you can see the path being rendered right, so it must be a problem with raphael-svg-import.
Can you provide me some hints??? (I'm new to SVG)

I have been experimenting with SVG for a little bit now and it's a bit of a coincidence because I just finished playing with that plugin today.
The url to a demo I have there also contains zip files in the documentation so you could experiment with these in Inkscape or any SVG editor and see if you cannot configure them to something in your project.
For what ever reason this plugin "likes" some SVG's but not others so maybe you could adapt one of the SVGs in the zip and it will probably work.
The authors know the plugin does not always work but it is gradually improving and even now I think it's possible to write compatible SVG's if you tinker with them.
If you need a facility to convert certain SVG's just to javascript you could use this.

Why use the HTML 5 Canvas tag?

Forgive me my ignorance but I am very new to the HTML 5 arena and never worked with graphics using Javascript.
I was doing some reading and came across the Canvas tag and the source stated that the canvas tag acts as a graphics container and is used to render graphics on the webpage by the use of Javascript.
My questions is, why would I need to use Canvas as a placeholder to render graphics instead of using some other arbitrary tag that can be used as a graphics placeholder for example?

A <canvas> tag is exactly like an <img> tag, with the difference that instead of loading the image from the network you can draw it yourself with javascript code.
You can draw lines, circles, filled polygons, gradients and matrix-transformed pictures. You can also redraw the canvas content in a loop to make an animation.
To see what you can do with a plain canvas 2d (no webgl, just standard 2d rendering) take a look at this small demo or look at this video if your browser is too old and doesn't support canvas.
It's pure javascript, nothing loaded from the network, everything is computed in the browser, including the texture and the raytraced image used for envmapping part. All in a single 4Kb html file.
Do you really think you can do the same using regular <div>s ?
EDIT:
For a much simpler demo with a readable source you can check out this rotating icosahedron.

Canvas is intended for graphics manipulation, whereas div isn't. Semantically, you should be using Canvas.

You can't draw on arbitrary elements.

Canvas allows you to manipulate pixels with acceptable speed. You can draw various shapes, set colors for pixels etc. With div you can only render standard HTML elements.

DIV is a container for other tags. CANVAS is a container for pixels.
Whilst it is (probably) possible to do everything you want to do drawing-wise inside a plain DIV, with CANVAS the browser knows semantically that the area is going to contain graphics and can use that information accordingly.
Browsers support a variety of drawing routines for CANVAS natively, whereas you'd have to cook your own entirely in JS for DIV.
A really good resource for information on the HTML5 canvas is http://diveintohtml5.ep.io/canvas.html

Why use canvas:
1- canvas is secure to use and compatible with multi platform.
2- it have a lot of ready function to use in animation.
3- you can play with speed, pixels, colors.
4- you can save result of canvas as image.
5- you can implement professionally games with canvas. check here
simply it is act like flash but with no plug-ins.
usefaul libraries to use:
- easel js: flash like library
- processing js : open souece animation library

Drawing using
<canvas>
Will load straight away when entering a webpage with this in use, where an
<img>
Will take much longer.

SVG drawing application with vector export

I want to create a drawing application where I can place text and images on a canvas. Those elements also need to be interactively manipulated. Eventually the resulting canvas has to be exported to a vector based PDF. An excellent contender for this functionality would be SVG.
However, this application also needs to be crossbrowser compatible. I've been browsing around for some time now and have seen a couple of solutions available. I found among others RaphaelJS and Google's SVGWeb for working with SVG.
Now for converting those SVG files to a PDF I'm not sure if for instance Batik will offer me what I am looking for.
Also, how would bitmap images be handled when converting the SVG to PDF?

Images within a PDF have to be part of the PDF. They can use any number of compression techniques (jpeg, fax, jbig2, zip, gif, a couple others), various bits per color, various colors per pixel, and so forth... but the pixels must be defined within that PDF.
I've used Batik myself. A little clunky in combination with iText (surprisingly large amount of code involved), but quite serviceable. The only thing that really bugged me was that it wouldn't draw text as text... Batik insists on drawing it as paths. They may have overcome this since I started using it a year or two ago. But that was kind of a deal breaker (HUGE pdf bloat) so we ended up rendering our text separately: PITA, potential z-order issues (that never came up for us), plus a couple subtle interal layout issues that didn't turn up till later.
Batik supports script, animation, and a variety of Other Things that don't really matter within the bounds of SVG->PDF conversion. There's at least one other Java SVG library out there that is much more compact(not as feature rich... half empty/half full), though I can't for the life of me remember the name at the moment. The name came up on the iText mailing list maybe a year ago? Don't recall exactly. Quite some time ago, and AFTER I got Batik working. Ah well.

Batik can convert svg to pdf, Inkscape or Adobe Illustrator can too AFAIK.

I think that Inkscape would be your best choice here, it mostly sticks to SVG 1.1 for the shapes it implements (using a few of its own properties, which you can get rid of if you save it as a plain SVG). For me, even when I save as an Inkscape SVG, it displays fine in browsers even with blurs, though it won't work in Internet Explorer. For that, there is no solution besides using an external tool such as (as you've already found) SVGWeb. Unfortunately, javascript support for SVG can differ between browsers, and there is no way to fix this.
As for PDF, I think that raster images are embedded if they are embedded within the SVG itself, or linked if the SVG's is linked. This is easy to do by going to Extensions > Images > select either Embed Images or Extract Images.

You can program a java applet with Processing. It's cross-browser, can export to pdf. Bitmap images would remain bitmap images embedded in the pdf.