svg.draw.js - Demo

Rectangle, click to draw

new SVG('rect').size('100%', '100%') .rect().draw();

Transformed Rectangle, click to draw

new SVG('rect_transformed').size('100%', '100%') .rect().draw().scale(4).rotation(45);

Polygon, press Enter to finish the shape

var poly1 = new SVG('polygon').size('100%', '100%') .polygon().draw(); poly1.on('drawstart', function(e){ document.addEventListener('keydown', function(e){ if(e.keyCode == 13){ poly1.draw('done'); poly1.off('drawstart'); } }); }); poly1.on('drawstop', function(){ // remove listener });

Ellipse, click to draw

new SVG('ellipse').size('100%', '100%') .ellipse().draw();

Circle, click to draw

new SVG('circle').size('100%', '100%') .circle().draw();

Polygon, aligned at grig

var poly2 = new SVG('polygonGrid').size('100%', '100%') .polygon().draw({snapToGrid:20}); poly2.on('drawstart', function(e){ document.addEventListener('keydown', function(e){ if(e.keyCode == 13){ poly2.draw('done'); poly2.off('drawstart'); } }); }); poly2.on('drawstop', function(){ // remove listener });

Polygon, aligned at grig on ctrl-down

var poly3 = new SVG('polygonGridOnCtrl').size('100%', '100%') .polygon().draw({snapToGrid:20}); poly3.on('drawstart', function(e){ document.addEventListener('keydown', function(e){ if(e.keyCode == 13){ poly3.draw('done'); poly3.off('drawstart'); } if(e.keyCode == 17){ poly3.draw('param', 'snapToGrid', 20); } }); document.addEventListener('keyup', function(e){ poly3.draw('param', 'snapToGrid', 1); }); }); poly3.on('drawstop', function(){ // remove listener });

Rectangle, mousedown/move/up to draw

var drawing = new SVG('rectNoClick').size('100%', '100%'); var rect = drawing.rect(); drawing.on('mousedown', function(e){ rect.draw(e); }, false); drawing.on('mouseup', function(e){ rect.draw('stop', e); }, false); rect.on('drawstop', function(){ // remove listener });