html5中的points,Can I plot HTML5 Canvas x/y points programatically

I've got an HTML5 canvas 'join the dots' type thing going - 2 lines with dots at their angle points - this is fine but I want to plot the X coordinates programatically with external JSON data (pulled from a 'local' server so won't need to be JSONP) - I hope I explain this clearly ...

I'm not trying to convert the JSON data into new DOM elements, but instead I need to apply the data to the actual script which maps the canvas coordinates. Ideally I want to use jQuery for this and my guess is that I will need to parse a JSON object via .getJSON(), but this is where I need some help.

Both X and Y coordinates are currently initiated with hard-coded variables in the canvas script but I want the JSON data to parse into the X variable programatically (the Y co-ords can stay hard coded and work fine for both lines).

Here's a fiddle of what I have so far: http://jsfiddle.net/ByT58/6/

Here's the markup/script for reference - and big thanks in advance for any help!:

HTML:

Here's how the external JSON would look:

{

"red": {

"r01x": 20,

"r02x": 149,

"r03x": 50

},

"blue": {

"b01x": 80,

"b02x": 179,

"b03x": 20

}

}

JS:

var ctx = document.getElementsByTagName('canvas')[0].getContext('2d');

// set attributes for all circles

var radius = 7;

// set attributes for all lines

ctx.lineWidth = 5;

ctx.lineJoin = 'round';

// set X co-ords for Red

var r01x = 20;

var r02x = 149;

var r03x = 50;

// set X co-ords for Blue

var b01x = 80;

var b02x = 179;

var b03x = 20;

// Set default Y coordinates for both Red and Blue

var y01 = 20;

var y02 = 50;

var y03 = 100;

// RED dots

ctx.beginPath();

ctx.fillStyle = "#E51919";

ctx.arc(r01x, y01, radius, 0, Math.PI * 2, true);

ctx.fill();

ctx.closePath();

ctx.beginPath();

ctx.fillStyle = "#E51919";

ctx.arc(r02x, y02, radius, 0, Math.PI * 2, true);

ctx.fill();

ctx.closePath();

ctx.beginPath();

ctx.fillStyle = "#E51919";

ctx.arc(r03x, y03, radius, 0, Math.PI * 2, true);

ctx.fill();

ctx.closePath();

// RED line

ctx.beginPath();

ctx.moveTo(r01x, y01);

ctx.lineTo(r02x, y02);

ctx.lineTo(r03x, y03);

ctx.strokeStyle = "#E51919";

ctx.stroke();

ctx.closePath();

// BLUE dots

ctx.beginPath();

ctx.fillStyle = "#133175";

ctx.arc(b01x, y01, radius, 0, Math.PI * 2, true);

ctx.fill();

ctx.closePath();

ctx.beginPath();

ctx.fillStyle = "#133175";

ctx.arc(b02x, y02, radius, 0, Math.PI * 2, true);

ctx.fill();

ctx.closePath();

ctx.beginPath();

ctx.fillStyle = "#133175";

ctx.arc(b03x, y03, radius, 0, Math.PI * 2, true);

ctx.fill();

ctx.closePath();

// BLUE line

ctx.beginPath();

ctx.moveTo(b01x, y01);

ctx.lineTo(b02x, y02);

ctx.lineTo(b03x, y03);

ctx.strokeStyle = "#133175";

ctx.stroke();

ctx.closePath();