show graphic on text imput

[
  { type: 'LINE', x1: 400, y1: 4, x2: 420, y2: 4, width: 0.25 },
  { type: 'LINE', x1: 336, y1: 297, x2: 336, y2: 292, width: 0.25 },
  { type: 'LINE', x1: 40, y1: 0, x2: 40, y2: 16, width: 0.25 },
  { type: 'LINE', x1: 168, y1: 297, x2: 168, y2: 292, width: 0.25 },
  { type: 'LINE', x1: 84, y1: 297, x2: 84, y2: 292, width: 0.25 },
  { type: 'LINE', x1: 300, y1: 8, x2: 420, y2: 8, width: 0.25 },
  { type: 'LINE', x1: 184, y1: 0, x2: 184, y2: 16, width: 0.35 },
  { type: 'LINE', x1: 20, y1: 0, x2: 20, y2: 16, width: 0.25 },
  { type: 'LINE', x1: 210, y1: 297, x2: 210, y2: 292, width: 0.25 },
  { type: 'LINE', x1: 300, y1: 0, x2: 300, y2: 16, width: 0.25 },
  { type: 'LINE', x1: 142, y1: 0, x2: 142, y2: 4, width: 0.25 },
  { type: 'LINE', x1: 0, y1: 12, x2: 100, y2: 12, width: 0.25 },
  { type: 'LINE', x1: 0, y1: 292, x2: 420, y2: 292, width: 0.35 },
  { type: 'LINE', x1: 331, y1: 0, x2: 331, y2: 8, width: 0.25 },
  { type: 'LINE', x1: 378, y1: 297, x2: 378, y2: 292, width: 0.25 },
  { type: 'LINE', x1: 126, y1: 297, x2: 126, y2: 292, width: 0.25 },
  { type: 'LINE', x1: 420, y1: 12, x2: 370, y2: 12, width: 0.25 },
  { type: 'LINE', x1: 0, y1: 16, x2: 420, y2: 16, width: 0.35 },
  { type: 'LINE', x1: 72, y1: 0, x2: 72, y2: 16, width: 0.25 },
  { type: 'RECT', x1: 0, y1: 0, x2: 420, y2: 297, width: 0.35 },
  { type: 'LINE', x1: 230, y1: 0, x2: 230, y2: 16, width: 0.25 },
  { type: 'LINE', x1: 294, y1: 297, x2: 294, y2: 292, width: 0.25 },
  { type: 'LINE', x1: 100, y1: 0, x2: 100, y2: 16, width: 0.25 },
  { type: 'LINE', x1: 60, y1: 0, x2: 60, y2: 16, width: 0.35 },
  { type: 'LINE', x1: 42, y1: 297, x2: 42, y2: 292, width: 0.25 },
  { type: 'LINE', x1: 0, y1: 4, x2: 184, y2: 4, width: 0.25 },
  { type: 'LINE', x1: 370, y1: 16, x2: 370, y2: 8, width: 0.25 },
  { type: 'LINE', x1: 400, y1: 0, x2: 400, y2: 8, width: 0.25 },
  { type: 'LINE', x1: 0, y1: 8, x2: 100, y2: 8, width: 0.25 },
  { type: 'LINE', x1: 252, y1: 297, x2: 252, y2: 292, width: 0.25 }
]