function displayCanvas() {
    var chas = +document.getElementById("hours").value;
    var mins = +document.getElementById("minutes").value;
    var canvasHTML = document.getElementById('myCanvas');
    var contextHTML = canvasHTML.getContext('2d');
    contextHTML.strokeRect(0, 0, canvasHTML.width, canvasHTML.height);

    //Расчет координат центра и радиуса часов
    var radiusClock = canvasHTML.width / 2 - 10;
    var xCenterClock = canvasHTML.width / 2;
    var yCenterClock = canvasHTML.height / 2;

    //Очистка экрана.
    contextHTML.fillStyle = "#ffffff";
    contextHTML.fillRect(0, 0, canvasHTML.width, canvasHTML.height);

    //Рисуем контур часов
    contextHTML.strokeStyle = "#000000";
    contextHTML.lineWidth = 1;
    contextHTML.beginPath();
    contextHTML.arc(xCenterClock, yCenterClock, radiusClock, 0, 2 * Math.PI, true);
    contextHTML.moveTo(xCenterClock, yCenterClock);
    contextHTML.stroke();
    contextHTML.closePath();

    //Рисуем рисочки часов
    var radiusNum = radiusClock - 10; //Радиус расположения рисочек
    var radiusPoint;
    for (var tm = 0; tm < 60; tm++) {
        contextHTML.beginPath();
        if (tm % 5 == 0) {
            radiusPoint = 5;
        } else {
            radiusPoint = 2;
        } //для выделения часовых рисочек
        var xPointM = xCenterClock + radiusNum * Math.cos(-6 * tm * (Math.PI / 180) + Math.PI / 2);
        var yPointM = yCenterClock - radiusNum * Math.sin(-6 * tm * (Math.PI / 180) + Math.PI / 2);
        contextHTML.arc(xPointM, yPointM, radiusPoint, 0, 2 * Math.PI, true);
        contextHTML.stroke();
        contextHTML.closePath();
    }

    //Оцифровка циферблата часов
    for (var th = 1; th <= 12; th++) {
        contextHTML.beginPath();
        contextHTML.font = 'bold 25px sans-serif';
        var xText = xCenterClock + (radiusNum - 30) * Math.cos(-30 * th * (Math.PI / 180) + Math.PI / 2);
        var yText = yCenterClock - (radiusNum - 30) * Math.sin(-30 * th * (Math.PI / 180) + Math.PI / 2);
        if (th <= 9) {
            contextHTML.strokeText(th, xText - 5, yText + 10);
        } else {
            contextHTML.strokeText(th, xText - 15, yText + 10);
        }
        contextHTML.stroke();
        contextHTML.closePath();
    }


    //Рисуем стрелки
    var lengthSeconds = radiusNum - 10;
    var lengthMinutes = radiusNum - 15;
    var lengthHour = lengthMinutes / 1.5;
    var d = new Date(); //Получаем экземпляр даты
    var t_sec = 6*d.getSeconds();
    var t_min = 6 * (mins + (1 / 60)); //Определяем угол для минут
    var t_hour = 30 * (chas + (1 / 60) * mins); //Определяем угол для часов



    //Рисуем минуты
    contextHTML.beginPath();
    contextHTML.strokeStyle = "#000000";
    contextHTML.lineWidth = 3;
    contextHTML.moveTo(xCenterClock, yCenterClock);
    contextHTML.lineTo(xCenterClock + lengthMinutes * Math.cos(Math.PI / 2 - t_min * (Math.PI / 180)),
        yCenterClock - lengthMinutes * Math.sin(Math.PI / 2 - t_min * (Math.PI / 180)));
    contextHTML.stroke();
    contextHTML.closePath();

    //Рисуем часы
    contextHTML.beginPath();
    contextHTML.lineWidth = 5;
    contextHTML.moveTo(xCenterClock, yCenterClock);
    contextHTML.lineTo(xCenterClock + lengthHour * Math.cos(Math.PI / 2 - t_hour * (Math.PI / 180)),
        yCenterClock - lengthHour * Math.sin(Math.PI / 2 - t_hour * (Math.PI / 180)));
    contextHTML.stroke();
    contextHTML.closePath();

    //Рисуем центр часов
    contextHTML.beginPath();
    contextHTML.strokeStyle = "#000000";
    contextHTML.fillStyle = "#ffffff";
    contextHTML.lineWidth = 3;
    contextHTML.arc(xCenterClock, yCenterClock, 5, 0, 2 * Math.PI, true);
    contextHTML.stroke();
    contextHTML.fill();
    contextHTML.closePath();

    return(mins, chas);
}


window.onload = function () {
    window.setInterval(
        function () {
            var d = new Date();
            displayCanvas();
        }, 1000);
}
function result() {
var chas = +document.getElementById("hours").value;
    var mins = +document.getElementById("minutes").value;


    var minutesAngle = (360 / 60) * mins;
    var hoursAdd = (mins / 2);
    var hoursAngle = ((360 / 12) * chas) + hoursAdd;


    if (chas > 23 || chas < 1) {
        alert("Некорректное время.");
        return;
    }
    if (mins == 60) mins = 0;
    if (mins > 60 || mins < 0) {
        alert("Некорректное время.");
        return;
    }
    if (chas > 12) {
        chas -= 12;
    }

    if (hoursAngle > minutesAngle) {
    	 var minutesAngle = (360 / 60) * mins;
    	var hoursAdd = (mins / 2);
    	var hoursAngle = ((360 / 12) * chas) + hoursAdd;
        var diff = hoursAngle - minutesAngle;
        if (Math.abs(diff) >= 90) {
            var a = 360 - diff;
            alert("Разница между стрелками = " + Math.abs(a));
        } else {
            alert("Разница между стрелками = " + Math.abs(diff));
        }
    } else {
        var diff = minutesAngle - hoursAngle;
        if (Math.abs(diff) >= 180) {
            var a = 360 - diff;
            alert("Разница между стрелками = " + Math.abs(a));
        } else {
            alert("Разница между стрелками = " + Math.abs(diff));
        }
    }
}