I need to write an application that accepts very simple doodles by users, kind of like in tenthousandcents and thesheepmarket.
For example, I might want users to write their name using their mouse.
Any suggestions?
I don't even need to host it myself. If there are services offered somewhere that I can just use that is fine.
Well, tenthousandcents is a Adobe Flash application. The best place to start is to begin learning Flash if you'd really like to make something similar. There's really not going to be anything easy about accepting even simple doodles if you don't know any frameworks.
One option is to use the HTML5 <canvas> tag, supported in Firefox, Safari, and Opera, with javascript, then uploading the image in form data.
This blocks out everyone using IE, though.
Adobe Flash is probably your best option.
As the other answers state, Flash would be the easiest method.
But don't rule canvas out. Through some nifty javascript and some some proprietary MS guff (VML) you can emulate canvas behaviour in IE.
If flash aint your thing (it sure aint mine) then this could be a really neat alternative.
If you don't want to use Flash, I think canvas is probably your best bet, as others have mentioned. There are a few projects floating around that emulate support for it in IE, but the most complete one (to my knowledge) is excanvas. Mozilla has a tutorial for using it, as does Bill Mill. This (older) tutorial talks about using canvas with AJAX.
However, if you don't want to build your own and you just want the ability, you might want to look into online whiteboards like Dabbleboard (which has an API) or skrbl (which has an embeddable widget).
So far, the best and easiest solution I have found is to use something like this: http://www.flashnifties.com/flash_guestbook.php
I would recommend using the <canvas> tag; it's available natively in Safari, Chrome, Firefox, and Opera, and available by using ExplorerCanvas in IE, which is a simple wrapper that makes IE's VML language accessible from a canvas compatible interface. See this article for a tutorial on how to make a drawing app using the <canvas> element. You can find a lot of docs and tutorials by searching Google.
There is an open-source <canvas> base drawing app that you can play with and download here.
You could take a look at how they do Drawing in Google Docs:
Google uses SVG in Firefox, Opera, Chrome and other browsers that support it and VML in Internet Explorer, so you don't need third-party plug-ins.
It's not too difficult to put together a basic scribbling app using just html. I'll let you work out the details of making it production ready.
I'm using extjs here as a cross browser event framework, but you can use whatever you're comfortable with (jquery). I'm also using Raphael to get cross browser drawing functionality.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>TestPage</title>
<script language="javascript" src="raphael-src.js"></script>
<script type="text/javascript" src="extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="extjs/ext-all-debug.js"></script>
<script language="javascript">
scribbler = function (container, width, height) {
this.canvas = Raphael(container, width, height);
this.currentdraw = null;
Ext.get(container).on('mousedown', function(e) {
var el = Ext.get(container);
this.currentdraw = this.canvas.path({ stroke: "black", fill: "none", "stroke-width":4 });
this.currentdraw.moveTo(e.getPageX() - el.getLeft(), e.getPageY() - el.getTop());
}, this);
Ext.get(container).on('mousemove', function(e) {
var el = Ext.get(container);
if (this.currentdraw != null)
{
this.currentdraw.lineTo(e.getPageX() - el.getLeft(), e.getPageY() - el.getTop());
}
}, this);
Ext.get(container).on('mouseup', function(e) {
this.currentdraw = null;
}, this);
}
var scribble;
Ext.onReady( function()
{
scribble = new scribbler("container", 800,600);
}
);
</script>
</head>
<body>
<div id="container" style="position:relative;border:1px solid black;width:640px;height:400px">
</div>
</body>
</html>
You'll have to record and store the various scribble lines in a form for submission. And ensure that the mouse pointer is correct all the time (it's a text bar under IE).
Anyway, enjoy.
PS. I've uploaded a working example including raphael and complete extjs2 libraries to drop.io (3Mb, 7zip).
PPS. I've uploaded a working example which is a basic (but pretty much a complete) control. See inquisitiveturtle.
You could use a java applet like Shi-painter like many oekaki implementations do, such as the one at iiichan.net.
Disclaimer: I understand the stigma associated with java applets these days, but I thought I'd include this for the sake of completeness. ;)