Recommend javascript graphics tutorials

Question

I need to learn about graphics in javascript. Can someone recommend good tutorial material?

In particular I'd like to mix graphics and formatted text in layers, if that helps.

Update: Eugene asks a good question, but the answer is really "yes." I don't know much about graphics in js from any point of view. I'm particularly unclear on the decision among raw graphics formats.

My immediate need is that I'm building a Ruby on Rails app with heavy 2D line art that's generated on the fly; I'd like to pass JSON to a client-side app that draws the results. But I also want to learn the topic thoroughly, not just hack a particular library.

Answer 1

Canvas has alot of very nice 2D graphics. Head over to ajaxian.com for some examples.

Answer 2

Personally I think canvas is your best bet here. It seems to be gaining a good foothold on the other choices in my opinion. I like the following tutorials:

Step by Step
Mozilla Real Time editor
Basic Usage Guide

By the way, you should know that no form of Canvas (or any other 2d graphics library other than flash) is supported by Internet Explorer. If IE support is a requirement you should definitely go with Flash.

Have fun!

Answer 3

Canvas is probably what you're looking for. If you need IE support, use excanvas. You'll probably also want to take a look at processing.js.

Answer 4

Eugene Lazutkin linked to an old question that I had already answered, but I'm gonna do so again! :)

I highly recommend Raphaël since you are going to be doing 2D drawing, and it takes care of all those pesky compatibility issues.

Answer 5

For 2D graphics drawing, you can find source code of jsDraw2D graphics library for javascript.

Answer 6

This tutorial series here gives you a good run down on how to use the Canvas element

Answer 7

Here is a simple tutorial showing how to draw simple shapes using JSGL.