Other than Canvas not being supported at that time in IE, another reason I did not use Canvas for my ORM extension was that Canvas is suitable for raster graphics, where you may want to control properties of each pixel. With RaphaelJS, the shapes that you create become part of the DOM and you can apply CSS attributes to them and add event handlers just like any other elements of the DOM, like button, text boxes etc. For example, to draw a (relationship) connector between tables, I have code something like –
var pathStr = "M" + x1 + "" + y1 + " L" + x2 + "" + y2; //M is for move and L is for line var.connector = canvas.path(pathStr); //canvas here is RaphaelJS object, not HTML5 Canvas $(connector.node).dblclick(onDBClick) //onDBClick is event handler function
Here is a good article,SVG or Canvas? Choosing between the two, comparing SVG and Canvas.
I have been working on a mobile application where users can draw strokes, shapes, insert images and move them. A couple of months back I was evaluating SVG Vs Canvas again, for this application. Now Android also supports SVG (from version 3), but because I wanted this application to run on older version of Android too, I decided to go with Canvas. By the way, if you want to know which features of HTML5 are supported on different browsers, visit ‘When Can I use‘ site e.g. you can find which browsers support Canvas here .
For the above Canvas application, I did most of the drawing using basic Canvas APIs. But recently I found a JS library for Canvas, KineticJS, which would have made my job easier. Like RaphaelJS, KineticJS also lets you draw shapes, images, add event listeners, scale, transform etc. It also allows you to group different shapes and perform operations on them as one entity. If you are developing a game then one feature of KineticJS that you would find useful is ‘hit test’, which lets you find if a given point lies in shapes you have created. I think I would use KineticJS for all my future projects that requires 2D graphics on Canvas.
If you want to do 3D graphics in the browser, then you should consider three.js. Three.js uses WebGL, which is currently not supported in many browsers. See the support table here.
– Ram Kulkarni
var pathStr = “M” + x1 + “” + y1 + ” L” + x2 + “” + y2; should be: var pathStr = “M” + x1 + ” ” + y1 + “L” + x2 + ” ” + y2;
Your spacing was incorrect.