Make Html Canvas Generate Pdf-ready Line Art?

I have an HTML/JavaScript program that uses the HTML5 canvas to generate a pretty graph: I want to include this graph in a book that I'm producing with LaTeX. Unfortunately, when

Solution 1:

The following is code that generates SVG that reproduces the rotated piece you have given in your question. The method is drawRotatedPiece(x, y, radius, angle).

// Generate a SVG path commandfunctionxycmd(cmd,x,y){
 return cmd+ x + " " + y;
}

functionrectpathxy(x,y,w,h){
   return xycmd("M", x, y) +
          xycmd("L", x+w, y) +
          xycmd("L", x+w, y+h) +
          xycmd("L", x, y+h) +
          "Z";
}

functiondrawRotatedPiece(x, y, radius, angle){
  trans=[];
  svg="";
  svg+="<path style='stroke:red;fill:white'";
  svg+=" transform='translate("+x+","+y+")'";
  svg+=" d='";
  svg+=rectpathxy(-radius, -radius, radius*2, radius*2);
  svg+="'/>";
  svg+="<path style='stroke:none;fill:black'";
  svg+=" transform='translate("+x+","+y+") rotate("+angle+")'";
  svg+=" d='";
  var w=radius;
  var h=radius*2/3.0;
  svg+= xycmd("M", 0, -radius) +
        xycmd("L", -radius, 0) +
        xycmd("L", +radius, 0) +
        "Z" +
        xycmd("M", x,     y) +
        xycmd("L", x+w,   y) +
        xycmd("L", x+w, y+h) +
        xycmd("L", x,   y+h) +
        "Z";
  svg+="'/>";
  return svg;
}

In case you need to generate any other graphics in SVG format (especially simple graphics like yours that are just a bunch of stroked and filled paths), my note on the Essentials of SVG may help you translate those graphics to SVG.