We have a sample for creating custom annotations that creates a custom diamond annotation and tool but you should be able to adapt it for your cases. The relevant code is in the WebViewer download under samples/custom-annotations/diamond.js.
1) For your stamp tool you probably don't need any of the custom selection model and control handle code so you can ignore all that for now. To have basic rectangular selection you can look at CustomDiamondAnnotation.prototype and change the selectionModel property to Annotations.BoxSelectionModel. Now to draw an image you just have to change the draw function. Assuming that you have an image object from somewhere else you can just change the draw code to: ctx.drawImage(myImage, this.X, this.Y, this.Width, this.Height). This will draw the image and allow you to change its size.
2) For this feature you could create as many custom annotations and tools as you require. To have a dynamic number for these annotations you could set a property on the prototype of the annotation that increases whenever a new annotation is created (i.e. the constructor is called) and each individual annotation will save it's own copy of the property.
For example on CustomDiamondAnnotation.prototype you could add the property index: 1. In the CustomDiamondAnnotation constructor you could have the code:
this.myIndex = this.index;
CustomDiamondAnnotation.prototype.index++;
So you've saved the index for each annotation in myIndex and in the draw function you can draw myIndex as you like. If you want to change an individual annotation's number then just change their myIndex property and if you want to change the base current number just change CustomDiamondAnnotation.prototype.index.
To be able to save any custom properties you'll need to modify the serialize and deserialize functions so that your properties will be saved and reloaded to and from XFDF.
Matt Parizeau
Software Developer
PDFTron Systems Inc.