var glyph;

$(function() {
  $('#svgcanvas').svg(); 
  svg = $('#svgcanvas').svg('get');
  svg.configure({fill: '#888', stroke: 'none'});
});

function drawStrokeSVG(s) {
  var id = 'path_' + s.num
  $('#' + id).remove();
  s.outline = svg.createPath();

  switch (s.type) {

    case 1:  // 直線
      svg.path(s.outline.
                  moveTo(  s.lLn.p[0].x, s.lLn.p[0].y  ).
                  lineTo(  s.lLn.p[1].x, s.lLn.p[1].y  ).
                  lineTo(  s.rLn.p[1].x, s.rLn.p[1].y  ).
                  lineTo(  s.rLn.p[0].x, s.rLn.p[0].y  ).
                  close(),
               {id: id}
      );
      break;

    case 2:  // 曲線
      s.outline = svg.createPath();
      svg.path(s.outline.
                  moveTo(  s.lSp.p[0].x, s.lSp.p[0].y  ).
                  curveQTo(s.lSp.p[1].x, s.lSp.p[1].y,
                           s.lSp.p[2].x, s.lSp.p[2].y  ).
                  lineTo(  s.rSp.p[2].x, s.rSp.p[2].y  ).
                  curveQTo(s.rSp.p[1].x, s.rSp.p[1].y,
                           s.rSp.p[0].x, s.rSp.p[0].y  ).
                  close(),
               {id: id}
      );
      break;

    default:
      break;
  }
}