HTML/Javascript inking or drawing control suggestions? - javascript

I am looking for something that will allow users to write out a signature in an HTML form. I am looking for something that will run locally on the machine so if it can be done through a javascript function or something else that would be great.
I have seen the canvas HTML5 object, but I haven't found any examples that work well with IE. I am continuing to look, but was just wondering if anyone knows of anythign else out there that will allow a user to write out a signature?

You could do that with Flex or Silverlight, if you're not averse to plugins.
Otherwise, the only way I can think of to do this would be to create a function that places a very small graphic of a 1 pixel dot over and over again at the point of the cursor when it is dragged with the mouse button depressed. (Depressing, eh?) The dots would replicate more profusely and create a thicker line where the cursor pauses, and make a thinner line as it moves faster. The dots would in any case be close enough together to appear as a line, the way halftone printing uses dots to make photographs appear in newspapers.
I could write this for you but you'd have to pay me. :)

not really 'anything else', but canvas can be made to work even in msie6 with google's excanvas (which maps canvas to vml iirc).
canvas painter does this, just successfully drew my signature in both ff3.6 and msie6, so that might make for a good starting point?

Related

Paperjs problem with using custom paths as styling handles/segmentPoints

Example
Video Example
The lack of selection styling in paperjs makes you improvise and one way to style them, is to create them yourself ( recommended on this post).
But the huge con with this is the performance! Where canvas quickly goes from usable 60fps to terrible 20 within seconds. Now the only method I thought would work to style your handles/points, is now useless.
Now I'm out of ideas as to how style them and I'm trying to seek the help of stackoverflow... The main thing that I want to achieve is the hover effect on handles/points . At this point I coded the most of the stuff in paperjs, and I really wouldn't want to switch everything to something else like PixiJs.
P.S Any help is appreciated!
In your video, the frame rate goes down because you draw a lot of paths and this would also happen at some point even with the native Paper.js selection.
So your only chance is to try to have as few as possible shapes in your scene.
Maybe you can take advantage of the less known features of Paper.js to reduce them a bit:
item.selectedColor
paper.settings.handleSize
Then, there is also the possibility of using SymbolItem for repeted shapes (like your circles) that should have better performances than regular paths.
Finally, if you're out of solutions, you could also fork the library and hook into the selection drawing code to adapt to your needs :).

How to antialias strokes drawn in canvas without using clearRect

I am working on a drawing app as a personal project (currently living at http://draw.ist/) and I'd like to get the drawn strokes smooth around the edges but it seems the only way to accomplish this is using clearRect. However, clearRect also clears the canvas every time I start a new path and I'd like to prevent that so the canvas actually accumulates the strokes.
I've seen stuff about creating a secondary canvas to save strokes to or something so the clear doesn't wipe them (at least I think it works somewhat like that) however that method would require a lot of additional code that I'd like to avoid. Most recently I've tried saving the canvas as an imageURL on mouseup and then re-placing it with drawImage right after every clearRect, and this seems to do the trick nicely but it has some bizarre interactions with my eraser and straightline tools, as well as some flickering every time it loads in the saved canvas image.
There isn't necessarily any particular snippet of relevant code here, but for reference the entire site can be found at http://draw.ist/ (Controls: hold shift to draw straight lines, hold spacebar to erase, scroll mousewheel to change brush size)
I'd like all drawn lines to be smooth and have antialiasing but without using the "secondary canvas as memory" method IF POSSIBLE. I think what could help me here as well is understanding why exactly clearRect is necessary to apply antialiasing to strokes in canvas and how it works exactly in layman's terms. I greatly appreciate any assistance on this, whether it's actually helpful or not!

Is processing.js a good option to implement this idea?

I've been gathering ideas for my personal project in CSS/JavaScript/XHTML.
The idea is to replicate this:
And so far I have this (I know it's far away from what I need, but just playing around)
http://jsfiddle.net/dburelax/XY8CA/9/
I was wondering if http:// processingjs.org/exhibition/ is my best choice to get this done in javascript? Thanks
P.S: I have no idea how to make the character move within the tiles any suggestions are welcome :)
I'd say light years away. But don't take it as sarcasm; let me explain.
What I see when I look at the gif is an engine that supports block "primitives".
Because, you see, every time he hovers a tile with the pointer it gets decorated with a white border.
In your case, you just have two images:
A map background
A gif of sprites for the character (without his back or sideway, but let's just forget that for now).
With these two in order to achieve the block highlighting you should always calculate offset, and apply image filters on the background with the border decoration (and shadows and what not). Then, when moving outside the box remove decoration the last window.
After that what do you do if you change box size? Recalibrate all offsets? What if you have boxes/bocks (I'll call them interchangeably now) in mixed sizes?
In game engines particularly you have primitives such as boxes, where you can detect collisions and either allow passage or not from the colliding box (a character is a box as well). Think how this would be practical if you for example had "fog of war" and allowed vision only in adjacent boxes.
It's not just about processing.js, which may or may not be helpful to you, but there are key bindings, character movement, character orientation to be thought about first.
I don't know about you, but I wouldn't be able to encode all that information in Javascript objects and still have it performant. Not with current Javascript engines, at least.
While your hobby project is a fun idea, there is much much more you have to learn first to be able to pull this off.
In the case I have offended, take but this and all is mended -- The Goblin
If this is in the scope of learning programming, while having a project to keep you motivated; then go for it (use the path I've deemed hard), learn first how to move images on the HTML5 canvas and when having actual code problems come back.

Replicate BBC iPlayer rotation effect with HTML5 / Canvas / JavaScript etc

I want to replicate the effect seen here on the BBC iPlayer where various circles and arcs rotate around a point.
I understand I need to use the Canvas element along with some drawing code to draw arcs which the have to be rotated. Here is an example of how I have tested drawing arcs. - I discounted the use of CSS3 features as I wasn't sure it'd give me the control I wanted - perhaps I'm wrong?
I'm not sure how to rotate these arcs in a way that mimics the BBC iPlayer. Ideally I want to create either a preset pattern and rotate various sections or just create a random pattern on the fly. But either way each section will require it's own rotation speed and so forth.
Can anyone help out with either a quick demo or perhaps some pointers on how to get started on this?
I'd also appreciate any advice on any browser limitations imposed by each solution. I understand not much will work in IE though :)
You could try taking a look at this: HTML5 Canvas Machines Vortex.

html5 canvas "graphics persistence" on reposition/resize

I noticed that when you move a canvas around or when you resize it, everything inside gets erased. I remember having a similar problem in windows forms applications in C#.
Anyway, what's the best way to keep the graphics on canvas, even after it moves etc.? (using javascript)
I've been working on a paint using canvas and websockets, you can see my problem here: http://students.info.uaic.ro/~tudor.berechet/ (just go to Coboards, select the Brush tool, click a bunch of times on canvas and then resize the window or enlarge the canvas)
One more thing I noticed, running the site off my HDD, this problem doesn't occur. which makes me wonder if there's some strange error somewhere.
I definitely need a persistent canvas, because I'm gonna have to implement the hand tool to move it around...
What say you?
The problem seems to have gone after cleaning up my code a bit. I still don't know what was causing it, but it seems that the canvas drawings now remain intact even after I move/resize the canvas.
Please confirm. [EDIT] confirmed.
The point is, my original assumption that canvas graphics are not persistent seems to have been wrong. There was most likely some coding error that was "erasing" my canvas.

Categories