box2d & canvas and that's all -

my goal draw physics bodies without createjs, in other terms want draw canvas api. here link exellent work box2dweb , createjs.

i want without createjs file . can draw blue line, transform in physics red line, delete blue line.

my code doesn't work if draw blue line. make work have destroy physics body.

i can draw 1 line (shape) want able draw unlimited number of shapes.

i'm sure possible simple way.

the createjs code: http://jsdo.it/masasgames/ozhb

var b2vec2 = box2d.common.math.b2vec2; var b2bodydef = box2d.dynamics.b2bodydef; var b2body = box2d.dynamics.b2body; var b2fixturedef = box2d.dynamics.b2fixturedef; var b2fixture = box2d.dynamics.b2fixture; var b2world = box2d.dynamics.b2world; var b2polygonshape = box2d.collision.shapes.b2polygonshape; var b2circleshape = box2d.collision.shapes.b2circleshape; var b2debugdraw = box2d.dynamics.b2debugdraw;  var stage = new createjs.stage("canvas"); var world = new b2world(new b2vec2(0, 5), true);  var shape; var drawing = false;  var previousmousex = 0; var previousmousey = 0; var u = new b2vec2(0, 0); var anchor = []; var bodies = []; var d = 1.0;  function init() {   if (createjs.touch.issupported()) {     createjs.touch.enable(stage);   }    var = new createjs.shape();   back.graphics.beginfill("#ffffff");   back.graphics.drawrect(0, 0, 450, 450);    stage.addchild(back);    stage.addeventlistener("mousedown", onmousedown);   stage.addeventlistener("pressup", onmouseup);    createjs.ticker.timingmode = createjs.ticker.raf;   createjs.ticker.addeventlistener("tick", tick);     //box2d   var groundfixdef = new b2fixturedef();   groundfixdef.density = 1.0;   groundfixdef.friction = 0.5;   groundfixdef.restitution = 0.2;   groundfixdef.shape = new b2polygonshape();   groundfixdef.shape.setasbox(2.325, 0.1);    var grounddef = new b2bodydef();   grounddef.type = b2body.b2_staticbody;    grounddef.position.set(2.25, 4.6);   world.createbody(grounddef).createfixture(groundfixdef);    grounddef.position.set(2.25, -0.1);   world.createbody(grounddef).createfixture(groundfixdef);    groundfixdef.shape.setasbox(0.1, 2.25);   grounddef.position.set(-0.1, 2.25);   world.createbody(grounddef).createfixture(groundfixdef);    grounddef.position.set(4.6, 2.25);   world.createbody(grounddef).createfixture(groundfixdef);    var debugdraw = new b2debugdraw();   debugdraw.setsprite(document.getelementbyid("canvas").getcontext("2d"));   debugdraw.setdrawscale(100);   debugdraw.setfillalpha(0.3);   debugdraw.setlinethickness(1.0);   debugdraw.setflags(b2debugdraw.e_shapebit | b2debugdraw.e_jointbit);   world.setdebugdraw(debugdraw);  }  function tick() {   if (drawing) {     shape.graphics.setstrokestyle(5, 1, 1);     shape.graphics.beginstroke("#000000");     shape.graphics.moveto(previousmousex, previousmousey);     shape.graphics.lineto(stage.mousex, stage.mousey);      var p = new b2vec2(0, 0);     p.x = stage.mousex - previousmousex;     p.y = stage.mousey - previousmousey;      if (vecmagnitude(p) !== 0) {        if (math.cos(10 / 180 * math.pi) > vecangle(p, u)) {         setanchor(previousmousex, previousmousey);       }        u.x = p.x;       u.y = p.y;     }      previousmousex = stage.mousex;     previousmousey = stage.mousey;   }    (var = 0; < bodies.length; i++) {     var body = bodies[i];     var line = body.getuserdata();     var position = body.getposition();      line.x = position.x * 100;     line.y = position.y * 100;     line.rotation = body.getangle() * 180 / math.pi;   }     world.step(1 / 60, 10, 10);   //world.drawdebugdata();   world.clearforces();   stage.update(); }  function vecmagnitude(v) {   return math.sqrt(math.pow(v.x, 2) + math.pow(v.y, 2)); }  function vecangle(v1, v2) {   return (v1.x * v2.x + v1.y * v2.y) / (vecmagnitude(v1) * vecmagnitude(v2)); }  function onmousedown(e) {   if (!drawing) {     shape = new createjs.shape();     shape.regx = 0;     shape.regy = 0;     stage.addchild(shape);      previousmousex = stage.mousex;     previousmousey = stage.mousey;      anchor = [];     setanchor(stage.mousex, stage.mousey);      drawing = true;   } }  function onmouseup() {   drawing = false;   setanchor(stage.mousex, stage.mousey);   createbody(); }  function setanchor(x, y) {   anchor.push(new b2vec2(x, y)); }  function createbody() {   var boxdef = new b2bodydef();   boxdef.type = b2body.b2_dynamicbody;   boxdef.position.set(0, 0);    var body = world.createbody(boxdef);    (var = 0; < anchor.length - 1; i++) {     var position = new b2vec2((anchor[i].x + anchor[i + 1].x) / 200, (anchor[i]       .y + anchor[i + 1].y) / 200);     var angle = math.atan2(anchor[i].y - anchor[i + 1].y, anchor[i].x - anchor[       + 1].x);      var l = vecmagnitude(new b2vec2(anchor[i].x - anchor[i + 1].x, anchor[i].y -       anchor[i + 1].y)) / 100;      if (anchor.length == 2 && l < 0.05) {       l = 0.05;     }      var boxfixdef = new b2fixturedef();     boxfixdef.density = d * l * 0.05;     boxfixdef.friction = 0.5;     boxfixdef.restitution = 0.1;     boxfixdef.shape = new b2polygonshape();     boxfixdef.shape.setasorientedbox(l / 2, 0.025, position, angle);     body.createfixture(boxfixdef);   }    body.setuserdata(shape);   bodies.push(body); }  init(); 

here working code 1 shape: http://jsdo.it/licart/qoms

var b2vec2 = box2d.common.math.b2vec2; var b2bodydef = box2d.dynamics.b2bodydef; var b2body = box2d.dynamics.b2body; var b2fixturedef = box2d.dynamics.b2fixturedef; var b2fixture = box2d.dynamics.b2fixture; var b2world = box2d.dynamics.b2world; var b2polygonshape = box2d.collision.shapes.b2polygonshape; var b2circleshape = box2d.collision.shapes.b2circleshape; var b2debugdraw = box2d.dynamics.b2debugdraw;  var shape; var dessin = false; var drawing = false; var scale = 100; var ptm = 100; var previousmousex = 0; var previousmousey = 0; var u = new b2vec2(0, 0); var anchor = []; var bodies = []; var d = 1.0;  var world = new b2world(new b2vec2(0, 9.8), true); var canvas = document.getelementbyid("canvas"); var context = canvas.getcontext("2d"); canvaswidth = 800,   canvasheight = 400; var mousex = 0; var mousey = 0;  var mousedown;  var debugdraw = new b2debugdraw(); debugdraw.setsprite(document.getelementbyid("canvas").getcontext("2d")); debugdraw.setdrawscale(100); debugdraw.setfillalpha(0); debugdraw.setlinethickness(0); debugdraw.setflags(b2debugdraw.e_shapebit); world.setdebugdraw(debugdraw);  //box2d var groundfixdef = new b2fixturedef(); groundfixdef.shape = new b2polygonshape(); groundfixdef.shape.setasbox(2.325, 0.1);  var grounddef = new b2bodydef(); grounddef.type = b2body.b2_staticbody;  grounddef.position.set(2.25, 3.6); var sol = world.createbody(grounddef); sol.createfixture(groundfixdef); sol.setuserdata("rectangle");   canvas.addeventlistener('mousemove', function(e) {   mousex = e.pagex - this.offsetleft;   mousey = e.pagey - this.offsettop;   if (mousedown) {     context.beginpath();     context.moveto(previousmousex, previousmousey);     context.linewidth = 5;     context.linejoin = 'round';     context.strokestyle = 'blue';     context.lineto(mousex, mousey);     context.stroke();   } }, false);  function tick() {    world.step(1 / 30, 8, 2);     if (drawing) {     var p = new b2vec2(0, 0);     p.x = mousex - previousmousex;     p.y = mousey - previousmousey;     if (vecmagnitude(p) !== 0) {       if (math.cos(10 / 180 * math.pi) > vecangle(p, u)) {         setanchor(previousmousex, previousmousey);       }       u.x = p.x;       u.y = p.y;     }     previousmousex = mousex,       previousmousey = mousey;    }   (body = world.getbodylist(); body; body = body.getnext()) {     var x = body.getposition().x;     var y = body.getposition().y;     var angle = body.getangle();       switch (body.getuserdata()) {       case "rectangle":          var x = body.getfixturelist().getshape().getvertices()[1].x - body.getfixturelist()           .getshape().getvertices()[0].x;         var y = body.getfixturelist().getshape().getvertices()[2].y - body.getfixturelist()           .getshape().getvertices()[1].y;          context.save();          context.translate(x * ptm, y * ptm);         context.rotate(angle);         context.translate(-x * ptm, -y * ptm);          context.linewidth = 5;         context.strokestyle = "pink";         context.strokerect(((x * ptm) - (x * ptm / 2)), ((y * ptm) - (y *           ptm / 2)), x * ptm, y * ptm);          context.restore();         break;       case shape:          context.save();         context.clearrect(0, 0, canvas.width, canvas.height);         context.beginpath();         context.translate(x * 100, y * 100);         context.rotate(angle);         context.strokestyle = "red";         context.linewidth = 5;         (var = 0; < anchor.length - 1; i++) {           var p1 = anchor[i];           var p2 = anchor[i + 1];           context.moveto(p1.x, p1.y);           context.lineto(p2.x, p2.y);         }         context.stroke();          context.restore();         break;      }   }   world.clearforces(); }  window.setinterval(tick, 1000 / 30);   canvas.addeventlistener('mousedown', function(e) {   dog_eraseline();   mousedown = true   if (!drawing) {     previousmousex = mousex;     previousmousey = mousey;     anchor = [];     setanchor(mousex, mousey);      drawing = true;   } }, false);  canvas.addeventlistener('mouseup', function() {   mousedown = false;   drawing = false;   setanchor(mousex, mousey);   createbody();  }, false);   function dog_eraseline() {   (body = world.getbodylist(); body; body = body.getnext()) {     if (body.getuserdata() == shape) world.destroybody(body);   }; }  function setanchor(x, y) {   anchor.push(new b2vec2(x, y)); }  function vecmagnitude(v) {   return math.sqrt(math.pow(v.x, 2) + math.pow(v.y, 2)); }  function vecangle(v1, v2) {   return (v1.x * v2.x + v1.y * v2.y) / (vecmagnitude(v1) * vecmagnitude(v2)); }  function createbody() {   var boxdef = new b2bodydef();   boxdef.type = b2body.b2_dynamicbody;   boxdef.position.set(0, 0);    var body = world.createbody(boxdef);    (var = 0; < anchor.length - 1; i++) {     var position = new b2vec2((anchor[i].x + anchor[i + 1].x) / 200, (anchor[       i].y + anchor[i + 1].y) / 200);     var angle = math.atan2(anchor[i].y - anchor[i + 1].y, anchor[i].x -       anchor[i + 1].x);     var l = vecmagnitude(new b2vec2(anchor[i].x - anchor[i + 1].x, anchor[i]       .y - anchor[i + 1].y)) / 100;      if (anchor.length == 2 && l < 0.05) {       l = 0.05;     }      var boxfixdef = new b2fixturedef();     boxfixdef.density = d * l * 0.05;     boxfixdef.friction = 0.5;     boxfixdef.restitution = 0.1;     boxfixdef.shape = new b2polygonshape();     boxfixdef.shape.setasorientedbox(l / 2, 0.025, position, angle);     body.createfixture(boxfixdef);   }   body.setuserdata(shape);   bodies.push(body); } 

nobody give me answer. i've found solution myself. , share it!

include draw_world() in tick , done:

here function @author j barker & p kirven

look @ http://jsdo.it/licart/2y7s