Search jQuery

jQuery Forum

Drawing with jQuery?

in Using jQuery • 8 years ago

This is sorta the only forum I frequent, sorry if you can't do this in jquery.

Does jQuery offer the ability to draw? I"m wanting to start moving into drawing -> drawing simple animations from point X - Y. I've glanced at html canvas, but I'm wondering what language is the powerhouse for fluidity in browsers.

I guess my question is which programming language offers the most stable platform for drawing basic lines and shapes, and offers the ability to animate them fluidly inside browsers.

At this point I think it's new age capability vs oldage. I don't want to alienate people. So if that's the case is javascript my best bet? (and if I was to ditch people... does javascript still meet the mark?)

Thanks for reading :) If this is an off thread for here Ill get it removed.

kind regards

Replies(4)

watusiware

Re: Drawing with jQuery?

8 years ago

Does jQuery offer the ability to draw?

No.

There are many Javascript libraries for drawing, though. Some use and/or tolerate jQuery, some might not.

Or you can use native Javascript APIs in the browser.

There are two ways to draw - <canvas> and SVG. You have to decide which makes sense for you.

I guess my question is which programming language offers the most stable platform for drawing basic lines and shapes, and offers the ability to animate them fluidly inside browsers.

You get one choice - Javascript. There isn't any other language available for use in browser, unless you count weird browser plugins that the user would have to install, or languages that "compile" to Javascript (like CoffeeScript).

7blake

Re: Drawing with jQuery?

8 years ago

Wicked. I actually like javascript and wasn't looking forward to learning a completely new language. Time to do some research into .... just how the heck you do it :P

Thanks for the reply

watusiware

Re: Drawing with jQuery?

8 years ago

Unless you're in N. Korea, I'd try Google...

javascript canvas library

javascript svg library

javascript drawing library

javascript animation library

The little bit of <canvas> programming I've done, I didn't use a library, since the native browser API is easy to use and consistent across modern browsers. But we just wrote a little sketch tool for annotating photos.

MDN is a great source for documentation on HTML/JS/CSS basics, and despite being from Mozilla is "fair and balanced" (no, for real, not like Fox) and has good coverage of differences between browsers.

Here's the MDN page on <canvas>:

https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API

Want to do something not so simple? There's some pretty fancy stuff available:

http://d3js.org

http://processingjs.org

http://greensock.com/gsap

Some of these cross boundaries into other areas. For example, GSAP does canvas or SVG drawing, and also does CSS tweening and can retrofit jQuery's ancient and sluggish animation functions (which I don't recommend - jQuery animation hails from a time when CSS animation didn't exist yet, and so uses timer callbacks to modify CSS at timed intervals - yuck! That said, GSAP actually does the same thing but faster the CSS animation...)

If you just need to move some image or element around on the screen, I'd recommend CSS animations and/or transitions There are plenty of cool effects to be had for the price of a Google search and a bit of reading. I suppose this counts as another language, since no Javascript required (though a little bit might be helpful) as it's (almost) completely done with CSS rules.

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_animations

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transitions

7blake

Re: Drawing with jQuery?

8 years ago

These are some great sites with some amazing utilization. Thanks alot for putting that all together. :)

Btw, na I've never heard of google, I should probably look that up with Netscape :P

Top Reply

Response title

Attachments

jQuery Forum

Drawing with jQuery?

Replies(4)

Re: Drawing with jQuery?

Re: Drawing with jQuery?

Re: Drawing with jQuery?

Re: Drawing with jQuery?

Statistics

Tags

Actions

Related Posts