var
    canvas = document.getElementById('stock-canvas'),
    width = canvas.width,
    height = canvas.height,
    ctx = canvas.getContext('2d');
//console.log(JSON.stringify(data[0])); //{"date":"20150602","open":4844.7,"close":4910.53,"high":4911.57,"low":4797.55,"vol":62374809900,"change":1.69}
ctx.clearRect(0, 0, width, height);
//ctx.fillText('Test Canvas', 10, 10);

var kw = width/data.length;
var kdw = kw - 3;
var yh = 3700.0;
var yl = 3000.0;
var yy = height/(yh-yl);

for(var i=0;i<data.length;i++){
    var compare = data[i].close-data[i].open;
    var s;
    var e;

    if(compare>0){
        ctx.strokeStyle='red';
        s=data[i].close;
        e=data[i].open;
    }else if(compare<0){
        ctx.strokeStyle='green';
        s=data[i].open;
        e=data[i].close;
    }else {
        ctx.strokeStyle='black';
        s=data[i].open;
        e=data[i].close;
    }

    var kh = (yh-data[i].high)*yy;
    var ks = (yh-s)*yy;
    var ke = (yh-e)*yy;
    var kl = (yh-data[i].low)*yy;
    var km = kw*i+kdw/2;
    var path = new Path2D();

    path.moveTo(km,kh);
    path.lineTo(km,ks);
    path.lineTo(km-kdw/2,ks);
    path.lineTo(km-kdw/2,ke);
    path.lineTo(km,ke);
    path.lineTo(km,kl);
    path.moveTo(km,ke);
    path.lineTo(km+kdw/2,ke);
    path.lineTo(km+kdw/2,ks);
    path.lineTo(km,ks);
    ctx.stroke(path);
}