These forums are currently read-only due to receiving more spam than actual discussion. Sorry.

It is currently Sat Dec 02, 2017 4:19 pm Advanced search

A graphic example made with canvas-graphics

Here you can discuss things related to HTML and the Web in general that do not fit in to other categories.

A graphic example made with canvas-graphics

Postby Dieter Hansen » Sun May 22, 2011 12:12 am

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
Attachments
greetings from bavaria.png
greetings from bavaria.png (94.59 KiB) Viewed 995 times
Dieter Hansen
<h6>
 
Posts: 2
Joined: Sat May 21, 2011 10:39 pm

Re: A graphic example made with canvas-graphics

Postby Xdega » Sun May 22, 2011 2:58 am

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.
Xdega
<h2>
 
Posts: 124
Joined: Tue Mar 01, 2011 6:30 pm
Location: USA



Return to General Discussion

Who is online

Users browsing this forum: No registered users and 0 guests