Drawing on a browser canvas 1

[Stretchwickster]

I had a recent requirement to be able to draw directly in the browser window using javascript and, after searching tek-tips, I found a very helpful post by BillyRayPreachersSon (thread216-905326). I tried his example using div's and came up with a quick solution but I needed more power and didn't have the time to implement a library of drawing routines myself so I followed BRPS's other piece of advice in the referenced thread to search for "javascript graphics library". Consequently, I came across a very good set of vector drawing functions at:

http://www.walterzorn.com/jsgraphics/jsgraphics_e.htm

Well worth a look!

Clive

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
"To err is human, but to really foul things up you need a computer." (Paul Ehrlich)
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
To get the best answers from this forum see: faq102-5096

 

[BabyJeffy]

You might be interested in this then:

http://www.abrahamjoffe.com.au/ben/canvascape/

Just recently referred to on Slashdot, and utilising the canvas html element available in Safari 1.3+ and Firefox 1.5 (at the moment).

Nice stuff

Cheers,
Jeff

[tt]Jeff's Page [/tt][tt]@[/tt][tt] Code Couch

http://www.codecouch.com/jeff/

[/tt]

What is Javascript? faq216-6094

 

[Stretchwickster]

Thanks for the link Jeff, but when I opened that page in Firefox 1.0.7 a popup appeared complaining that I didn't have a compatible browser?

Clive

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
"To err is human, but to really foul things up you need a computer." (Paul Ehrlich)
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
To get the best answers from this forum see: faq102-5096

 

[BillyRayPreachersSon]

Clive,

It's always good to see references to older posts - it restores my faith in the search function, if nothing else ;o)

You might be interested to know about the canvas object - it's supported by the newest Firefox build, as well as Safari 1.3+, and possibly other browsers.

Basically, it lets you draw and manipulate graphics without having to rely on creating many DIV elements, with some good results. It's also a lot quicker than manipulating many DIV elements!

Here's an example that was /.ed a few days ago:

http://www.abrahamjoffe.com.au/ben/canvascape/

Dan

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[BabyJeffy]

utilising the canvas html element available in Safari 1.3+ and Firefox 1.5

You'll have to use Firefox 1.5 for the demo. It's really very very very good... and the underlying JS shows you how it works (no attempt to bloat it, nor to obfuscate it).

I hit it with 1.07 of Firefox first too

Cheers,
Jeff

[tt]Jeff's Page [/tt][tt]@[/tt][tt] Code Couch

http://www.codecouch.com/jeff/

[/tt]

What is Javascript? faq216-6094

 

[Stretchwickster]

Thanks for that guys.
Two questions:
1) Is the Canvas element a new addition to the official standards?
2) Is this something that Microsoft would be slow to implement in IE?

Clive

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
"To err is human, but to really foul things up you need a computer." (Paul Ehrlich)
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
To get the best answers from this forum see: faq102-5096

 

[BabyJeffy]

I did some hunting on the following resources:

http://developer.mozilla.org/en/docs/Category:HTML:Canvas

http://www.mozillazine.org/talkback.html?article=6461

http://www.whatwg.org/specs/web-apps/current-work/#canvas

Here is a good summary:

The introduction of this element is likely to be controversial as it is not part of any W3C standard, though WHATWG may choose to submit it for standardisation at a later date.

So the answer to the first question is no.

I really can't decide on the second question. Personally I think they should include it... but I really don't know how to check what features they are aiming to include.

Cheers,
Jeff

[tt]Jeff's Page [/tt][tt]@[/tt][tt] Code Couch

http://www.codecouch.com/jeff/

[/tt]

What is Javascript? faq216-6094

 

[Stretchwickster]

Thanks for your very informative input Jeff!

Clive

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
"To err is human, but to really foul things up you need a computer." (Paul Ehrlich)
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
To get the best answers from this forum see: faq102-5096