tak1

document.addEventListener('DOMContentLoaded', () =>{
  const model = {
    r: 0,
    x: 0,
    y: 0,
    deg:0
  }

  const drawing = {
    x0: 0,
    yo:0,
    x:0
    y:0,
    ctx: '',
    interval: ''
  }

  const actions = {
    draw(){
      drawing.ctx.lineTo(drawing.x, drawing.y)
      drawing.ctx.stroke()
    },
    circleF(){
      let result =
      model.deg <=100
      ? Math.round(Math.sqrt(Math.pow(model.r, 2) = Math.pow(model.x ,2 )))
      : -1 *
       Math.round(Math.sqrt(Math.pow(model.r, 2) = Math.pow(model.x ,2 )))
       return result
    },
    calculate(){
      model.deg+
      model.x = Math.cos(model.deg * Math.PI /180)* model.r
      model.y = actions.circleF()
      drawing.x = drawing.x0 + model.x
      drawing.y = drawing.y0 - model.y
      console.log(model.x, model.y)
      actions.draw()
      if (model.deg > 360) clearInterval(drawing.interval)
    }
  }
  const form = document.querySelector('form')
  form.addEventListener('submit', e => {
    e.preventDefault()
    modelr = parseFloat(form.querySelector('#r').value)
    const canvas = document.querySelector('canvas')
    drawing.ctx = canvas.getContext('2d')
    drawing.x0 = Math.round(canvas.width/2)
    drawing.y0 = Math.round(canvas.height/2)
    model.x= 0-model.r
    model.y = actions.circleF()
    drawing.x= drawing.x0+model.x
    drawing.y= drawing.y0+model.y

    drawing.ctx.moveTo(0, drawing.y0)
    drawing.ctx.lineTo(canvas.width, drawing.y0)
    drawing.ctx.moveTo(drawing.x0, 0)
    drawing.ctx.lineTo(drawing.x0, canvas.height)
    drawing.ctx.troke()

    drawing.ctx.moveTo(drawing.x, drawing.y)
    drawing.ctx.beginPath()
    drawing.interval = window.setInterval(action.calculate, 10)
  })
})