Develop Reference

Using the Surface Pro pen on websites

The stylus on the MS Surface Pro is really good, especially in OneNote. For engineers and designers, it makes sketching diagrams and wireframes super simple.
On the other hand, OneNote is fairly limited in its online capabilities, and I can think of many other uses for a good stylus within web applications.
Is there way, or better yet an existing library, to replicate OneNote's stylus behavior (e.g. palm rejection, smoothing lines, erasing strokes, etc.) in JavaScript for use in a browser?
EDIT: To be clear, I mean more than just basic drawing on a , more like the inking features in MS Office, where you can draw freehand on top of document content without interfering with how you interact with the app, and the ink stays put when you scroll and zoom.
I envisage some kind of fullscreen transparent canvas that appears when a pen hover is detected, and hidden when the pen is removed to allow regular mouse input. The contents would be conveyed to some kind of SVG and displayed with position: relative; or something.
Would this new possible in raw HTML5, or am I looking at some kind of plugin?

The Pointer Events draft spec provides the primitives you would need to write such a library, but unfortunately the Chrome team has voted against supporting it, and it remains to be seen whether it will become a sufficiently supported standard to be usable on public sites.

Non-Canvas graphics in web pages

I am a complete novice at web development and I am wondering a few things about graphics rendering using JavaScript (not Flash or some other plugin). For example, is it possible to render arbitrary graphics (e.g. lines, curves, text, images etc.) inside a web page without using the Canvas feature found only in HTML5? I ask because I believe I have seen Google for example showing interactive graphics for one of their logo enhancements on their homepage for special anniversaries and the like before HTML5 was around and currently in browsers which don't even support HTML5. I also remember seeing animations in web pages during the 90s that were done in pure JavaScript.
So:
1) Is such graphics rendering possible using pure JavaScript?
2) If so, which APIs or libraries are being used?
3) Is it possible to decorate standard HTML controls with arbitrary graphics?
I am trying to determine the bounds of what is possible in a web-based UI.

For example, is it possible to render arbitrary graphics (e.g. lines, curves, text, images etc.) inside a web page without using the Canvas feature found only in HTML5?
Yes. Have a look at SVG, which has been around in some form or another since... 1992 or thereabouts.
There are plenty of docs and tutorials on the Mozilla Developer Network.
I ask because I believe I have seen Google for example showing interactive graphics for one of their logo enhancements on their homepage for special anniversaries and the like before HTML5 was around and currently in browsers which don't even support HTML5.
You saw SVG, which Google has used for Google doodles in the past and still uses for all sorts of stuff (portions of Google Maps on some platforms).

JavaScript Consultation needed with (in HTML5 context)

It is a hobby project with a friend,
but since I will invest in it (for UI/UX design) I need to be sure about feasability.
I am a programmer myself but I do not consider being experienced with JS and HTML5.
[Description]
I will be doing this kind of project BUT in JS and Html5 not Flash or Silverlight.
Here is the list of questions about feasabilities with JavaScript and HTML5: https://www.greetingbee.com/card-studio.aspx
we drag drop and manipulate images and in the end we want to save the greeting card (the composed surface) as image file...
how to do it without canvas? to printscreen or generate an image of specific area of html composition (DOM)
how to do it with canvas? keeping in mind performance ?
using SVG and/or PNG for keeping quality of shapes of greeting cards againts resizing etc.. any suggestions and tools recommendations
is there a JS script that could be used to make browser support some HTML5 features if it is not supporting some things, like make browser emulate and support :)), I do not like this question myself but who knows ))
I know its abit unusual case but we all might benefit if those answers find solutions and tips.
I share these links which have some sort of solutions:
www.stackoverflow.com/questions/12652769/rendering-html-elements-to-canvas/12660867#12660867
I know about html2Canvas which is said to be not so perfect, and Modernizer script that help to determine html5 features with browser

I don't know how to do it without canvases but with them there is toDataURL method. You can read about it here: http://www.nihilogic.dk/labs/canvas2image/
If You want to save image on server-side you could send data returned by toDataURL() to your server through AJAX or smthing like that.
As for second question about emulation of HTML5 there is a piece of code which enables you to use canvas tag on old IEs http://code.google.com/p/explorercanvas/

Which one is better, using plain html with javascript or a canvas?

I have been recently into developing more with html5 canvas & as I see, it is more of JavaScript. So when should it be preferred over plain html? All I want to know is that given that I have to develop a game say like pacman, which one should be better to use? (May be for drawing applications canvas is a lot more helpful than using divs)
For example here are two implementations of pacman
Using divs' and javascript
Using html5 canvas
I would like to know the pros and cons of developing a browser game with canvas & with html div's and js. Also I want to know when is it better to use canvas & when is it better to use plain html & js.

if backwards compatibility isn't a concern, use a <canvas>, this is exactly what they were designed for.
An array of pixels is far more efficient than creating a DOM element for every single dot on the page.

I believe one of the major distinctions between the use of canvas or html (dom) for something like a game is the trade-off between the dom helping you to mangage your objects by providing the mouse events to hook, or you managing them in JavaScript yourself.
You need to handle all the mouse events yourself if you use canvas for a game, there are libraries to help you do this, one such library is EaselJS. This library will help you to easily add listeners to your objects in canvas.
Obviously not needing to have all your objects in the dom, you get a massive performance benefit if you require any scrolling etc. Take the Google Maps fusion tables layers as an example, they can render 1000s of markers on the map using canvas and maintain a great user experience, this was something that just wasn't possible when using the dom.
So its all about the trade-off, libraries and more code to manage your objects in canvas - but reap performance rewards, or ease of development in html (dom), but possible performance hits for many objects.

For a simple 2D game I would go the canvas way.
For 3D games you will have to take a look at WebGL ( which is a native browser implementation of opengl ) and probably a webgl engine like copperlicht which will wrap the webgl api for you. You can also do 2D games with WebGL, and if your 2D game is graphics heavy, webgl would be faster than canvases.
Of course there is also the Flash solution, but I would not go that way.
edit: theoretically you can also make 3D games with just canvases but that would mean reinventing the wheel ( transformations etc. )

HTML and DOM for graphics are slow, but they will work in older browsers.
Canvas is very fast, but does only work in modern browsers.
So, if your target group is modern smartphones or modern browsers, then definitely go for canvas! Moreover, if you need certain special effects or particles, then there will be no other way than to use Canvas, since this cannot really be done with the DOM.

Perhaps SVG might be an option for you? It is not as messy as pure html, which is not suited for games, but provides better browser-support. There is also a good framework for SVG: Raphael. I myself used SVG for some game-implementations. (risk, tetris...)

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.