? parts and ? colors to select, stupendous combinations total!
Instructions
Click the buttons to change parts or colors.
(You can opt to include a standard shadow as well.)
After finishing, right-click to save as a PNG file!
Use in your Dungeon Craft game. (No need to resize.)
Note that the image will look blurry in IE. Please use another browser instead.
Historical Notes
Stockings - men's were knee-long and secured to drawers belt; women's were shorter and securied to a garter below the knee. Some included a leather sole to walk in.
Cotehardie (14th+ c.) - tight jacket with sleeves to the elbows, longer below the belt, the hem sometimes dagged. Later, sleeves elongated, and other decorations were added.
Tabard (15th+ c.) - originally humble peasant garment, by this time adopted by knights to wear over their armor with belts.
Crespine (15th+ c.) - snood (loose hairnet) now evolved to hold the hair at the sides (sometimes like horns) in northern Europe. Mid-15th c. became the caul.
In medieval England, bright colors were favored, especially crimson, blue, yellow, green, and purple (but sumptuary laws, etc. restricted this more for peasants and clergy).
Learning Notes
context.drawImage fails due to image loading too quickly. window.onload (or anImage.onload) is one way to control this.
A nifty css property is image-rendering: auto | crisp-edges | pixelated. For this purpose, of course pixelated is best. Luckily, canvas images shown larger seem to save in their normal (non-enlarged) size.
Css property user-select gets rid of the annoying text selection problems for the span tags.
context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height) where "s" is "source." This lets one draw only part of an image (e.g. a frame).
Css property margin did not work for span without changing display to inline-block (or block, but then they fill the width).