Skip to content

Instantly share code, notes, and snippets.

@maberer
Created September 7, 2019 19:47
Show Gist options
  • Save maberer/71212127fe4384e978187ddb3b07039f to your computer and use it in GitHub Desktop.
Save maberer/71212127fe4384e978187ddb3b07039f to your computer and use it in GitHub Desktop.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title of the document</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.debug.js" integrity="sha384-NaWTHo/8YCBYJ59830LTz/P4aQZK1sS0SneOgAvhsIl3zBu8r9RevNg5lHCHAuQ/" crossorigin="anonymous"></script>
</head>
<body>
<h1>Demo for jsPDF precision drawing very small arc dimensions</h1>
</body>
<script type="text/javascript">
window.onload = createPdf;
function createPdf() {
var x = 100.0
var y = 100.0
var segmAngle = 16.00
var lineWidthOuterRing = 0.20
var lineWidthInnerRing = 0.25
function getRad(deg) {
return deg * Math.PI / 180;
}
var drawArcs = function(ctx, val, r) {
for (var i = 19; i >= 0; i--) {
var drawSegm = (val & (0x01 << i)) != 0
if (drawSegm) {
startAngle = -90.0
startAngle += segmAngle * (19-i)
endAngle = startAngle + segmAngle
ctx.arc(x, y, r, getRad(startAngle), getRad(endAngle), true);
ctx.stroke();
}
}
}
// Default export is a4 paper, portrait, using milimeters for units
var doc = new jsPDF()
var ctx = doc.context2d;
ctx.lineWidth=lineWidthInnerRing;
drawArcs(ctx, 0xFFAAAAB, 1.0)
ctx.lineWidth=lineWidthInnerRing;
drawArcs(ctx, 0xFFAAAAB, 0.775)
doc.save('jspdf_a4.pdf')
}
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment