var canvas = document.getElementById('canvas')
var context = canvas.getContext('2d')

function line(x1, y1, x2, y2) {
    context.beginPath()
    context.moveTo(x1, y1)
    context.lineTo(x2, y2)
    context.stroke()
}

function circle(x, y, r) {
    context.beginPath()
    context.arc(x, y, r, 0, Math.PI * 2)
    context.stroke()
}

function ball(x, y, r) {
    context.beginPath()
    context.arc(x, y, r, 0, Math.PI * 2)
    context.fill()
}

context.fillStyle = '#FFDAB9'
context.fillRect(0, 0, 500, 700)

var r = 30
var x = r
var y = r
var dx = 2
var dy = 2
var dr = 1
var minr = 30
var maxr = 50

var storona = 50
var a = 15
var da = 2
var b = 15
var db = 2

function draw() {
    window.requestAnimationFrame(draw)

    context.fillStyle = '#FFDAB9'
    context.fillRect(0, 0, 500, 700)

    if (Math.sqrt((a - x) * (a - x) + (b - y) * (b - y)) < r) {
        circle(x, y, r)
        line(a, b, a + storona, b)
        line(a + storona, b, a + storona, b + storona)
        line(a + storona, b + storona, a, b + storona)
        line(a, b + storona, a, b)
    } else {
        context.fillStyle = 'red'
        context.fillRect(a, b, storona, storona)

        circle(x, y, r)
    }
    x = x + dx
    y = y + dy
    r = r + dr

    console.log("" + r + " " + dr)
    if (r == minr) {
        dr++
    }
    if (r == maxr) {
        dr--
    }

    if (x < r || x > 500 - r) {
        dx = -dx

    }
    if (y < r || y > 700 - r) {
        dy = -dy
    }

    while (x < r || x > 500 - r) {
        x += dx
    }
    while (y < r || y > 700 - r) {
        y += dy
    }

    a = a + da
    b = b + db

    if (a < 0 || a > 500 - storona) {
        da = -da
    }

    if (b < 0 || b > 700 - storona) {
        db = -db
    }
}
draw()