JavaScript. Подробное руководство, 6-е издание

   if (arguments.length == 0 || !graph.getContext) return;

   // Получить объект "контекста" для элемента <canvas>,
   // который определяет набор методов рисования
   var g = graph.getContext("2d"); // Рисование выполняется с помощью этого объекта
   var width = graph.width, height = graph.height; // Получить размер холста

// Следующие функции преобразуют количество месячных платежей
   // и денежные суммы в пикселы
   function paymentToX(n) { return n * width/payments; }
   function amountToY(a) { return height-(a*height/(monthly*payments*1.05));}

   // Платежи - прямая линия из точки (0,0) в точку (payments,monthly*payments)
   g.moveTo(paymentToX(0), amountToY(0)); // Из нижнего левого угла
   g.lineTo(paymentToX(payments), // В правый верхний
   amountToY(monthly*payments));
   g.lineTo(paymentToX(payments), amountToY(0)); // В правый нижний
   g.closePath; // И обратно в начало
   g.fillStyle = "#f88"; // Светло-красный
   g.fill; // Залить треугольник
   g.font = "bold 12px sans-serif"; // Определить шрифт
   g.fillText("Total Interest Payments", 20,20); // Вывести текст в легенде

   // Кривая накопленной суммы погашения кредита не является линейной
   // и вывод ее реализуется немного сложнее
   var equity = 0;
   g.beginPath; // Новая фигура
   g.moveTo(paymentToX(0), amountToY(O)); // из левого нижнего угла
   for(var р = 1; р <= payments; р++) {
   // Для каждого платежа выяснить долю выплат по процентам
   var thisMonthsInterest = (principal-equity)*interest;
   equity += (monthly - thisMonthsInterest); // Остаток - погашение кред.
   g.lineTo(paymentToX(p),amountToY(equity)); // Линию до этой точки
   }
   g.lineTo(paymentToX(payments), amountToY(O)); // Линию до оси X
   g.closePath; // И опять в нач. точку
   g.fillStyle = "green"; // Зеленый цвет
   g.fill; // Залить обл. под кривой
g.fillText("Total Equity", 20,35); // Надпись зеленым цветом

   // Повторить цикл, как выше, но нарисовать график остатка по кредиту
   var bal = principal;
   g.beginPath;
   g.moveTo(paymentToX(O),amountToY(bal));
   for(var p = 1; p <= payments; p++) {
   var thisMonthsInterest = bal*interest;
   bal -= (monthly - thisMonthsInterest) //Остаток от погаш. по кредиту
   g.lineTo(paymentToX(p),amountToY(bal)); // Линию до этой точки
   }
   g.LineWidth = 3; //Жирная линия
   g.stroke; //Нарисовать кривую графика
   g.fillStle="black"; //Черный цвет для текста
   g.fillText("Loan Balabce", 20, 50); //Элемент легенды

   //Нарисовать отметки лет на оси Х
   g.textAling="center"; //Текст меток по центру
   var y = amounToY(0); //Координата Y на оси X
   for (var year=1;year*12 <= payments; year++) { //Для каждого года
   var x=paymentToX(year*12); //Вычислить позицию метки
   g.fillRect(x-0.5, y-3, 1, 3); //Нарисовать метку

   if (year == 1) g.fillText("Year", x, y-5); // Подписать ось
   if (year % 5 == 0 && year*12 !== payments) // Числа через каждые 5 лет
   g.fillText(String(year), x, y-5);
   }

   //Суммы платежей у правой границы
   g.textAling="right"; //Текст по правому краю
   g.textBaseLine="middle"; //Центрировать по вертикали
   var ticks = [monthly*payments, principal]; //Вывести две суммы
   var rightEdge = paymentToX(payments); //Координата X на оси Y
   for (var i = 0; i < ticks.Length; i++) { //Для каждой из 2 сумм
   var y = amountToY(ticks[i]); //Определить координату Y
   g.fillRect(rightEdge - 3, y - 0.5, 3, 1); //Нарисовать метку