A graphic example made with canvas-graphics

[Dieter Hansen]

Hi!
Attached is a picture I made with my own canvas-drawing program, entirely in Javascript, running on Firefox 3.6, Windows XP SP2.

You see rotated, scaled and translated rectangles, rotated circles, manually and automatically set gradients, fillings, text, an image (the smilies from here), global alpha, shadows and transparent colors.
I wrote 99% of the program while being at home in Bavaria and while having no internet access.
The Canvas-specification was basically the help I had. (Beside that the darkroom.html canvas example somewhere was nice to see, too. Learned how to insert a local or online image and not getting a 'security error 1000' in Firefox. )

I'm not good in using bugzilla or mailing lists, so someone please put up my suggestions on there:
1. pattern-Object: .startPatternAt(x,y); .returnPatternsWidthHeight; .returnAsStringForSaving(wishedFormatType); .initFromSavestring(string); .returnPatternAsData(wishedFormatType).
about .startPatternAt(x,y): Actual example: I wanted to make a spray tool, by using a pattern with dots on a line's strokeStyle. But regardless how thick the line is, the actual pattern print in the canvas is always at the same canvas-coordinates. (For filling a preset path you could move the pattern around.) But maybe I'm missing something. =)
2. similiar for gradient-Object: .returnAsStringForSaving(wishedFormatType); .initFromSavestring(string);
3. text-functions: function ctx.putTextPath: so you could use the path for intersections with other paths; and one could use the standard ctx.stroke- and ctx.fill-functions for the put text-path
There are a couple more things, but I currently can't remember.

Error: In my browser's version repeat-x and repeat-y for patterns just result in repeat. But maybe that's already fixed in newer releases.

Greetings
D. Hansen

[Xdega]

Welcome to the forums, pretty nice to see you are having fun with the canvas element without even having the internet etc. good work! next up you should play around with some animation/pixel manipulation.

[Dieter Hansen]

Hello!
I'll probably put some animation up at end of month, though maybe only as youtube-video.

Edit: I just add a list of some graphics I made the last weeks. Just what I draw for testing.
schwebende Gradient Kreise.png
alltogether test transparenz.png
testtest.png
900x900 test.png
bunte rechtecke.png
circles pattern.png
kunterbunt.png
so where here 3.png
so where here 2.png
so where here.png
image test.png
leer.png
bavaria.png
because she is beautiful 2.png
because she is beautiful.png
test5.png
test4b.png
test4.png
pattern lines.png
test3.png
test2.png
colorPipette.png
test.png
gruppeAufloesen.png
gruppiereObjekte.png
dText.png
dRectangle2.png
dLine.png
dLinePath.png
dCirle2.png
moderne Kunst.jpg
greetings from bavaria.png