Develop Reference

HTML Canvas Tracing

I'm trying to build something in HTML5/Canvas to allow tracing over an image and alert if deviating from a predefined path.
I've figured out how to load an external image into the canvas, and allow mousedown/mousemovement events over it to draw over the image, but what I'm having trouble getting my head around is comparing the two.
Images are all simple black on white outlines, so from what I can tell a getPixel style event can tell if there is black underneath where has been drawn upon or underneath where the mouse is on.
I could do it with just the mouse position, but that would require defining the paths of every image outline (and there are a fair number, hence ideally wanting to do it by analyzing the underlying image)..
I've been told that its possible with Flash, but would like to avoid that if possible so that compatability with non-flash platforms (namely the ipad) can be maintained as they are the primary target for the page to run.
Any insight or assistance would be appreciated!

I think you already touched upon the most straight-forward approach to solving this.
Given a black and white image on a canvas, you can attach a mousemove event handler to the element to track where the cursor is. If the user is holding left-mouse down, you want to determine whether or not they are currently tracing the pre-defined path. To make things less annoying for the user, I would approach this part of the problem by sampling a small window of pixels. Something around 9x9 pixels would probably be a good size. Note that you want your window size to be odd in both dimensions so that you have a symmetric sampling in both directions.
Using the location of the cursor, call getImageData() on the canvas. Your function call would look something like this: getImageData(center_x - Math.floor(window_size / 2), center_y - Math.floor(window_size / 2), window_size, window_size) so that you get a sample window of pixels with the center right over the cursor. From there, you could do a simple check to see if any non-white pixels are within the window, or you could be more strict and require a certain number of non-white pixels to declare the user on the path.
The key to making this work well, I think, is making sure the user doesn't receive negative feedback when they deviate the tiniest bit from the path (unless that's what you want). At that point you run the risk of making the user annoyed and frustrated.
Ultimately it comes down to one of two approaches. Either you load the actual vector path for the application to compare the user's cursor to (ie. do point-in-path checks), or you sample pixel data from the image. If you don't require the perfect accuracy of point-in-path checking, I think pixel sampling should work fine.
Edit: I just re-read your question and realized that, based on your reference to getPixel(), you might be using WebGL for this. The approach for WebGL would be the same, except you would of course be using different functions. I don't think you need to require WebGL, however, as a 2D context should give you enough flexibility (unless the app is more involved than it seems).

How to make a rotating object (sphere, box, etc.) using only the canvas

I'd like to make a rotating object (sphere, box, etc.) using only the canvas. But I can't find a tutorial. Help If you saw somewhere or explain how to do it.
Like this example, only without any effects

Hope you like math. 3D effects can always be achieved on a 2D plane if you are willing to write some code.
Some resources that will probably help:
An Intro to Computer Graphics
and for help with the math,
A Book on Linear Algebra

Ah well it's pretty simple in theory. One way is to just set up a timer and then when it fires, clear the canvas and redraw your sphere, box whatever. To make it faster you can cover over a region of the canvas instead of the whole thing. Also you can get png sprites and move them about on the canvas.
I got into this stuff by trying out the pyjamas canvas wrapper, which means you can code in python and then compile it into js, which to me is a lot friendlier.
http://pyjs.org/examples/gwtcanvas/output/GWTCanvasDemo.html
NB the demo is slightly borken but the example code does compile and run perfectly well if you do a git pull.

what can i do on my idea (about javascript html5 css)

i want to make a demo using html css javascript, and the idea is :
1.i want to make a editor liek a paper
2.you can write word on it like flash , the different from textarea is :
it can be writed on anywhere you clicked, and show the Cursor where you left click
3.it can be Paint simple Graphics like flash
so what can i do??
1.using div ?
2.using canvas ?
3.other
thanks

Use SVG/VML graphics.
Best way to do this is with a library such as Raphael or JSX Graph.
Hope you find what you want between these two libraries.

1 and 2 could be done without Canvas. You could simply catch the click event on the underlying element, and create a div (with contenteditable) or a textarea (nicely styled), to that position.
For number 3 it would be handiest to use the Canvas element.
It also depends on what level of support you need to give to "older" browsers. As you might know Canvas is not supported in IE8 (and lower).
It also depends on whether you want to do something with the final result. Canvas is a canvas, and you can only export it as bitmap image, not vector. You might want to chose SVG to keep the image in a Vector format.

Is it possible to get pixel coordinates of text and draw a rectangular border around it using Javascript?

I am evaluating technology options for an upcoming project, and one of the requirements is to draw a rectangle around certain groups of words in a text field.
Each time the text is evaluated and parsed, certain recognized parts of it must be boxed with a rectangle, which should also respond to mouse clicks. There is even a requirement to place a little triangle to one of the corners of this rectangle.
I have no control over the requirements, and clearly this requirement points out to getting pixel positions of text in a text field (or a div container), and using some sort of overlay mechanism to draw the rectangle.
Unless I am using the wrong keywords, google searches return no helpful results, and I'd really appreciate your input about this topic.
Best Regards
Seref Arikan
Ps: any books/resources about advanced browser dom based graphics with javascript be appreciated also.

I would recommend looking at this plugin: http://johannburkard.de/blog/programming/javascript/highlight-javascript-text-higlighting-jquery-plugin.html
It's not exactly what you want, but you might be able to adapt it. The work of finding text in running content and then manipulating it is a little messy.
edit note that that plugin is for text in the HTML document, not text in input text fields or in <textarea> blocks. That would be pretty hard to do, but possibly somebody's done it.

I suggest you use multiple, borderless text fields, each containing a single part of the text(words or letters) and wrap groups as needed in span styled with a border and the triangle as a positioned background image.

animated board game for web - not Flash - what is possible?

What is the best cross-browser way to get a flat mouse coordinate input data and simple callback for mouse events for my rectangular game area on my web page, even when it has loads of larger and smaller images and text string overlaid haphazard onto it?
And what is the best way to insert or remove a text string or semi-transparent image overlay at an arbitrary location (and Z order, specified relative to existing objects) in a board game rectangle with cross-browser DHTML?
And how can I stop the user selecting part or all of my montage of images (I just want them to interact with it as if it was Flash), and can I stop the right click menus coming up in IE, FF etc?
I want to do this without Flash because I want something that will work both on desktops and on iPhone and potentially other mobile platforms too.
I appreciate there are serious limitations (eg less image scaling capabilities, not vector, no rotation capability) to what I can do if I'm not using Flash but I'm very interested to know what capabilities are available.
Are there perhaps any frameworks available to make it easier than coding from scratch?
Would J/Query be a good match for some of the requirements? What else do I need?

I would recommend Google Web Toolkit. It lets you program in Java, which gives you all the type-safety and nice IDE functionality that Java entails, but compiles to Javascript so that you can just run it in a browser. It also does a ton of optimization and supports tons of features.

jQuery is excellent at doing this. I used jQuery's UI and Ajax functionality to implement the frontend for a game of chess.
I made it a little easier by creating an 8-by-8 table with unique div names for each tile, so Javascript can access them by getting the elements by id. If you can't create something like that, you do have the option of placing elements anywhere on the page (either absolute or relative to a given element). You can also easily change the z-index, including when the use is dragging a piece or when they have dropped it.
As far as disable right click and item selection goes, that's something that I didn't figure out how to do. You might want to take a look at some other Ajax games like Grand Strategy, which are much more polished than my experiment and may have figured out how to do this.

There are two main APIs for working with arbitrary drawing and positioning on the web, Canvas and SVG.
Take a look at Chrome Canvas Experiments and the Raphael Javascript toolkit to see some examples and Javascript abstractions.

The key is element.style.position = 'absolute'. To illustrate just what's possible here's how far I've managed to push javascript (and from scratch at that!):
http://slebetman.110mb.com/tank3.html - RTS in DOM! Click on units/squads then click somewhere else to tell them where to go. You can control both sides.