kineticjs

HTML5 drag and drop images from a toolbar to a canvas

Demo: http://jsfiddle.net/m1erickson/2Us2S/ Use jquery-ui to create draggable elements. $(“#myToolbarImageElement”).draggable(); Load these elements with data payloads which are key-value pairs. In your case this might be an image object that you want drawn on the canvas. $(“#myToolbarImageElement”).data(“image”,myImageObject); Set your canvas as a drop zone: $(“#myCanvas”).droppable({drop:myDropHandler}); When you drop the elements on canvas you can read the … Read more

Fast and responsive interactive charts/graphs: SVG, Canvas, other?

Fortunately, drawing 2000 circles is a pretty easy example to test. So here are four possible implementations, two each of Canvas and SVG: Canvas geometric zooming Canvas semantic zooming SVG geometric zooming SVG semantic zooming These examples use D3’s zoom behavior to implement zooming and panning. Aside from whether the circles are rendered in Canvas … Read more