Edit in JSFiddle

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);
    }
  }
});