function isNumeric(n) { return !isNaN(parseFloat(n)) && isFinite(n); } function tx(x) { return (x-minx)/s;} function ty(y) { return (500 - (y - miny) / s);} var my_canvas = document.getElementById('canvas'), ctx = my_canvas.getContext("2d"); ctx.strokeStyle="black"; ctx.fillStyle = "yellow"; ctx.lineWidth=2; var pdf = $("#data").html().split("\n"); $("#data").html(pdf); var minx = 100000, maxx = 0, miny = 100000, maxy = 0; pdf.forEach(function(entry) { var line = entry.split(" "); if (isNumeric(line[0])) { var x = parseFloat(line[0]); var y = parseFloat(line[1]); if (minx > x) { minx = x; console.log("test3"); } if (maxx < x) { maxx = x } if (miny > y) { miny = y } if (maxy > y) { maxy = y } } }); minx -= 5; ctx.beginPath(); ctx.moveTo(0, 0); var s = 0.5; pdf.forEach(function(entry) { var line = entry.split(" "); if (isNumeric(line[0])) { var x = parseFloat(line[0]); var y = parseFloat(line[1]); if (line[2] == 'm') { ctx.moveTo(tx(line[0]), ty(line[1])); } if (line[6] == 'c') { ctx.bezierCurveTo(tx(line[0]), ty(line[1]), tx(line[2]), ty(line[3]), tx(line[4]), ty(line[5])); } } if (line[0] == 'h') { ctx.closePath(); ctx.fill(); } }); ctx.stroke(); ctx.fillStyle = "red"; pdf.forEach(function(entry) { var line = entry.split(" "); if (isNumeric(line[0])) { if (line[2] == 'm') { ctx.fillRect(tx(line[0]), ty(line[1]), 2, 2); } if (line[6] == 'c') { ctx.fillRect(tx(line[0]), ty(line[1]), 2, 2); ctx.fillRect(tx(line[2]), ty(line[3]), 1, 1); ctx.fillRect(tx(line[4]), ty(line[5]), 2, 2); } } });