draw / main

window.onload = function () {//функция будет вызываться при загрузке окна
    var canvas = document.querySelector("canvas");//инициализирцем канвас с помощью jquery селектора
    var context = canvas.getContext("2d");//рисуем в 2д  
}


function circle() {//функция для отрисовки круга,  будет вызываться когда нажимаем на кнопку круг
    var element = document.querySelector('input[type=checkbox]');  
    var maxx = 1400;//максим координата по оси х
    var maxy = 500;//макс координата  по оси у
    var min=50;//минимальная координата для всех осей
    var cx = document.querySelector("canvas").getContext("2d");//получаем канвас
    cx.beginPath();//
    cx.lineWidth = 5; // толщина линии
    
    cx.fillStyle = '#' + (Math.random().toString(16) + '000000').substring(2,8).toUpperCase();//создание рандомного цвета
    //cx.arc(Math.random() * (maxx - min) + min, Math.random() * (maxy - min) + min, 45, 0, 2 * Math.PI);//рисуем круг, центр в рандомной точке
    //в диапазоне от минимального до макисмального заданные выше, радиус 45 , угол начала дуги = 0
    // if (element.checked) {
    //     cx.fill();//если нужно закрасить фигуру то примеянем fill
    // }
    //cx.stroke();//рисуем окружность


    if (element.checked) {
        cx.arc(Math.random() * (maxx - min) + min, Math.random() * (maxy - min) + min, 45, 0, 2 * Math.PI);//рисуем круг, центр в рандомной точке
        cx.fill();//если нужно закрасить фигуру то примеянем fill
        
    }else{
        cx.arc(Math.random() * (maxx - min) + min, Math.random() * (maxy - min) + min, 45, 0, 2 * Math.PI);//рисуем круг, центр в рандомной точке 
           
    }
    cx.stroke();//рисуем окружность

    // function getRadians(degrees) {
	// return (Math.PI / 180) * degrees;
    // }   
}

circle0.onclick = circle;//при клике на кнопочку будет вызываться функция отрисовки круга

function line() {//функция для отрисовки линии,  будет вызываться когда нажимаем на кнопку линия
    var maxx = 1400;//максим координата по оси х
    var maxy = 500;//макс координата  по оси у
    var min=50;//минимальная координата для всех осей
    var ctx = document.querySelector("canvas").getContext("2d");//получаем канвас
    ctx.beginPath();
    ctx.lineWidth = 5; // толщина линии
    ctx.moveTo(Math.random() * (maxx - min) + min, Math.random() * (maxy - min) + min); //передвигаем перо 
    //на рандомную точку из диапазона макс мин
    ctx.lineTo(Math.random() * (maxx - min) + min, Math.random() * (maxy - min) + min); //рисуем линию
    //до рандомной точки
    ctx.stroke();
}

line0.onclick = line;

function rectangle() {//отрисовка прямоугольника
    var element = document.querySelector('input[type=checkbox]');  
    var maxx = 1000;
    var maxy = 300;
    var min=180;
    var cx = document.querySelector("canvas").getContext("2d");
    cx.beginPath();
    cx.fillStyle = '#' + (Math.random().toString(16) + '000000').substring(2,8).toUpperCase();//создание рандомного цвета
    
    if (element.checked) {
        var x = Math.random() * (maxx - min) + min;
        var y = Math.random() * (maxy - min) + min;
        cx.strokeRect(x, y, 200, 100);//коорд начальной точки по х и по у ширина и высота
        cx.fillRect(x, y, 200, 100);//заполнение цветом если чекнута галочка
    }else{
        cx.strokeRect(Math.random() * (maxx - min) + min, Math.random() * (maxy - min) + min, 200, 100);//иначе без заливки
    }
}

rectangle0.onclick = rectangle;

clear0.onclick = function(){//кнопка очистки полотна
    var cx = document.querySelector("canvas").getContext("2d");
    cx.clearRect(0, 0, 1500, 1000);//координаты начала и ширина с высотой
}