Bezier graphic
Draw graphic using bezier curves
HTML
<body onload="drawGraphic();" onresize="drawGraphic();">
<canvas id="myCanvas">
</canvas>
</body>
CSS
html, body {
height: 100%
width: 100%;
padding: 0;
margin: 0;
background: #FFFFFF;
}
canvas {
padding: 0;
margin: 0;
background: #FFFFFF;
}
JavaScript
var graphicPoint = [
0, -80, 40, 40, -20, 60, -60, -20, 0, 40, 0, 80, -60, 0, 20, 0
];
var canvasGraphicSettings = {
xShift: 0,
yShift: 0,
xStretch: 1,
yStretch: 1,
paddingTop: 10,
paddingBottom: 10,
paddingRight: 10,
paddingLeft: 10
};
function setCanvasGraphicSettings(canvasId) {
var maxY, minY;
var canvas = document.getElementById(canvasId);
canvas.width = window.innerWidth - 4;
canvas.height = window.innerHeight - 5;
if (graphicPoint.length > 0) {
maxY = graphicPoint[0];
minY = graphicPoint[0];
for (var i = 0; i < graphicPoint.length; i++) {
if (maxY < graphicPoint[i]) {
maxY = graphicPoint[i];
} else if (minY > graphicPoint[i]) {
minY = graphicPoint[i];
}
}
canvasGraphicSettings.xStretch = (canvas.width - canvasGraphicSettings.paddingRight - canvasGraphicSettings.paddingLeft) / (graphicPoint.length - 1);
if (maxY != minY) {
canvasGraphicSettings.yStretch = (canvas.height - canvasGraphicSettings.paddingTop - canvasGraphicSettings.paddingBottom) / (maxY - minY);
} else {
canvasGraphicSettings.yStretch = 1;
}
canvasGraphicSettings.xShift = canvasGraphicSettings.paddingLeft;
canvasGraphicSettings.yShift = canvasGraphicSettings.paddingBottom - minY * canvasGraphicSettings.yStretch;
}
}
function drawAxis(canvasId) {
var canvas = document.getElementById(canvasId);
var context = canvas.getContext('2d');
context.beginPath();
context.moveTo(canvasGraphicSettings.paddingLeft, canvasGraphicSettings.paddingTop);
context.lineTo(canvasGraphicSettings.paddingLeft, canvas.height - canvasGraphicSettings.paddingBottom);
if ((canvas.height - canvasGraphicSettings.yShift >= canvasGraphicSettings.paddingTop) && (canvasGraphicSettings.yShift >= canvasGraphicSettings.paddingBottom)) {
context.moveTo(canvasGraphicSettings.paddingLeft, Math.round(canvas.height - canvasGraphicSettings.yShift));
context.lineTo(canvas.width - canvasGraphicSettings.paddingRight,...