Develop Reference

How to Create Web based Mirror Tool using Javascript?

I am working on an ecommerce website for Glasses. Where I want to put a feature to try the glasses on your face or on some sample faces. The perfect example for this is one this site
http://www.glasses2you.co.uk/prescription-glasses/gender/mens-glasses
See the Try in Mirror option on this website.
I can see it has been built using Flash Actionscript.
Any suggestion how can I build this using Javascript through jQuery or such related tools?
Thanks in advance.

Simply position the image of the glasses on top of the photo.
You can do this with CSS, which can be set with JavaScript. Use the CSS position property.
For your source images of glasses, use PNG so that you can have a proper alpha channel. You will probably want to specify offsets for each image individually.

Uses for canvas | Practical examples

I'm trying to understand what people use canvas for?
I see it on job postings I read about it in Definitive JavaScript, but I don't quite get what it is used for.
I understand that you can draw 2d or 3d ( usually 2d ) objects but why no just use Gimp or Photoshop and upload the image.
Is it so you can create dynamic images based on say...user-specific data?
What is a practical example or perhaps a link to a professional implementation of canvas ( Definite JavaScript show basis stuff like drawing circles ).
MDN Tutorial

I have used a canvas to draw a graph, and it falls back to requesting a PHP-generated image if the browser doesn't support <canvas>. It's always a good idea to delegate processing from the server to the client, as this places less load on the server. In other words, instead of the server going "here's the stuff", it's more like "here's the data and the instructions to show it".
Another use I've seen is to highlight areas of an imagemap when moused over.
<canvas> is central in HTML5 game development, since it is used to draw the entire game viewport. Without it, there is no game.

Is it so you can create dynamic images based on say...user-specific data?
Yes

We used <canvas> to build interactive design editor for apparel in our e-commerce store — http://printio.ru/tees/new
The kind of interactivity we provide was only possible with Flash until recently.
Even on back end, we use Node.js and <canvas>-based image processing+generation to take data from online editor and create designs that are later used in store. These canvas-generated designs are eventually printed out on tshirts, mugs, caps, bags, and so on.
I think that's a pretty practical example :)
This is all done via Fabric.js canvas library (developed by us as well).

<canvas> is used for better Performance. <canvas> is much more faster and dynamic than jpeg or anything else. Example: http://www.profistart.com/internetseiten.html here was <canvas> used for Background.

Image viewer in html5

I have to develop an image viewer application. The designed application should have the following features
Zoom in functionality
Zoom out functionality
Magnifying functionality
Pan functionality
Image overview functionality
I have to develop the application in Asp.net application. I have the following questions
What will be the better method to develop such application , I mean Whether it is implemented using Asp.net controls or standard HTML controls
Have any scope of HTML5 in developing such application?
Can i get any customizable open source project written in javascript or jQuery?

My answers to your questions:
I would use HTML, since you don't need anything from the server.
There is, you can search google for info.
Look at the info below.
I would try the following steps:
Look for examples of the required features.
Strip these examples down and build them up again according to your requirements.
Create a holder for the image. You can load the image from the server with jQuery and AJAX
Implement controls for zooming, panning. Use the implementation you created in step 2
There is alot of information to be found on the internet. Some examples are:
Zooming
http://www.tripwiremagazine.com/2012/07/jquery-image-zoom.html
Panning
http://manos.malihu.gr/jquery-image-panning
Overview
http://www.designzzz.com/jquery-slide-show-image-gallery-tutorials-downloads/
Tutorial for pan and zooming with HTML5 canvas
http://my.safaribooksonline.com/book/web-development/html/9781449308032/images-on-the-canvas/zooming_and_panning_an_image

For me,
I would use HTML,
Use HTML5 and CSS3 if you can,
Yes, there are plenty. Just type what you need. It seems what you are building is a image slider/gallery. Plenty of those on the web. Just look for it.
If you have to build it from scratch, what you could do is research, these css properties. scale, zoom, and transitions.
There you go, hope I pointed you in the right direction.

Opensource Graphics Framework for Web?

Is there any opensource HTML5+CSS3+Javascript based Graphics framework (like www.degrafa.org) available to help one develop an online drawing tool like the one provided by lucidcharts.com?
I basically want to develop a tool where a user can drag-and-drop some already available shapes, resize, rotate, and perform other operations on the figures drawn.
Suggestion for flash based opensource frameworks are welcome too. :)

Dragging and dropping shapes would not be a problem (check out EaseJS). I'm sure you aren't expecting some primitive shapes to be shipped with the library, but are looking to code up the programmatic definitions of primitives, and utilize the drag and drop features of the framework. I hope my assumption is correct. Even if the underlying framework does not provide drag and drop wrappers out of the box, they should not be difficult to code. So here goes:
JS
EaseJS (with a drag and drop demo!)
http://easeljs.com/examples/dragAndDrop.html
RaphaelJS
http://raphaeljs.com/
Processing.js
http://processingjs.org/
Actionscript
X-Graphics Drawing Framework
http://code.google.com/p/xgraphics-drawing-framework/
ASDraw
http://code.google.com/p/asdraw/
Graffiti
http://www.nocircleno.com/graffiti/

Another great framework is d3.js
http://mbostock.github.com/d3/

WYSIWYG - Drag and drop widgets from toolbar into canvas

I'm trying to create a web-based WYSIWYG editor that consists of a canvas and a tool bar with widgets such as text object, shape object, line object, image object, video object and photo gallery object. A person can click and drag objects from the tool bar and place them into the canvas area. Once placed in canvas, they can change the properties of the objects. Properties they can change are width, height, color, z-index etc....
Does anyone know if there's an off the shelf solution I can start from and customize? If not, then what libraries and technologies should I be aware of to build this from scratch?
I'm primarily a backend developer, so I'm not up to speed with all the new things that come with HTML5 and CSS3, so not sure if they are relevant to what I need to do.

we (#work) have started a research project with University of Padua (italy - course of Software Engineering) aimed to obtain a web page generator. It's a WYSIWYG and you can Drag and drop widgets from toolbar into canvas :) unfortunately, the UI is in Italian but the code is very good.
It's an open source project and you can take a look # the source.
The technologies that have been used are:
HTML5 (<canvas> to easily represent shapes and easily zoom-in/out)
javascript/jQuery
Php (backend script to save/load templates)
references: http://sketchyoursite.sourceforge.net/ (http://sourceforge.net/projects/sketchyoursite/)
Edit: another tool that could be helpful is https://gomockingbird.com/mockingbird/
About starting from scratch, I suggest you to use the following architecture/technologies:
HTML+css obv for the basic layout (widget toolbar, canvas area...)
Tons of JS to represent each different object. I.e. you could map a particular widget with a pure JS object that could have some properties. These props are rendered when you click the object inside the canvas area. When you want to drag an object inside the area, resize it etc you should use a js lib (personally, I prefer mootools, also coz it simplifies OO through the Class system).
Server side scripts (Php, ruby, java...) to save (XML, Json..DB?) and load.

check http://fabric.js
I am developing a diagram tool using this similar to dia , awesome support for drap-drop-scale

I recently stumbled across Hotglue, it works like that but unfortunately without canvas. I guess they (and me) would be very happy to transform it from div positioning to canvas, it is in their todo list for a far away release at least.