canvas bars

by Amanda Williamson

HTML

<canvas id="canvas" height="350" width="350"></canvas>

CSS

canvas {
    border: solid 1px;
}

JavaScript

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

var bar1 = {
    open: 100,
    high: 150,
    low: 50,
    close: 120
};
var bar2 = {
    open: 230,
    high: 230,
    low: 20,
    close: 20
}

var open1 = 300 - bar1.open, //200
    high1 = 300 - bar1.high, //150
    low1 = 300 - bar1.low, //250
    close1 = 300 - bar1.close, //180
    open2 = 300 - bar2.open, //120
    high2 = 300 - bar2.high, //120
    low2 = 300 - bar2.low, //270
    close2 = 300 - bar2.close; //270
    
ctx.beginPath(); 
ctx.moveTo(100,low1);
ctx.lineTo(100,high1);
ctx.moveTo(100,open1);
ctx.lineTo(50,open1);
ctx.moveTo(100,close1);
ctx.lineTo(150,close1);
ctx.lineWidth = 15;
ctx.strokeStyle = 'red';
ctx.stroke();

ctx.lineCap = 'square';

ctx.beginPath(); 
ctx.moveTo(200,low2);
ctx.lineTo(200,high2);
ctx.moveTo(200,open2);
ctx.lineTo(150,open2);
ctx.moveTo(200,close2);
ctx.lineTo(250,close2);
ctx.lineWidth = 15;
ctx.strokeStyle = 'blue';
ctx.stroke();