56 lines
1.4 KiB
HTML
56 lines
1.4 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<title>Tax forms: Bar chart with lines</title>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<script src="taxForms.js"></script>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
|
||
|
|
<canvas id="chart" width="700" height="550"></canvas>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
const canvas = document.getElementById('chart');
|
||
|
|
const context = canvas.getContext('2d');
|
||
|
|
|
||
|
|
/* Draw a line from (fromX, fromY) to (toX, toY) */
|
||
|
|
function drawLine(fromX, fromY, toX, toY) {
|
||
|
|
context.beginPath();
|
||
|
|
context.moveTo(toX, toY);
|
||
|
|
context.lineTo(fromX, fromY);
|
||
|
|
context.stroke();
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Draw a text (string) on (x, y) */
|
||
|
|
function drawText(text, x, y) {
|
||
|
|
context.fillStyle = 'black';
|
||
|
|
context.fillText(text, x, y);
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Draw a text and with a line to its right */
|
||
|
|
function drawLineWithText(text, fromX, fromY, toX, toY) {
|
||
|
|
drawText(text, fromX - 50, fromY + 10);
|
||
|
|
drawLine(fromX, fromY, toX, toY);
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Insert your code here. */
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Draw lines on the y axis of the canvas
|
||
|
|
*
|
||
|
|
* @param {number} n - Number of lines to draw
|
||
|
|
*/
|
||
|
|
const drawNLines = (n) => {
|
||
|
|
for (let i = 1; i <= n; i++) {
|
||
|
|
const y = canvas.height * (n - i + 0.5) / n;
|
||
|
|
const text = 100000 * i;
|
||
|
|
drawLineWithText(text, 50, y, canvas.width, y);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
drawNLines(10);
|
||
|
|
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|