paint

HTML

<div id="panel">
<input type="button" id="r" name="colors" value="x">
<input type="button" id="b" name="colors" value="">
<input type="button" id="g" name="colors" value="">
<input type="button" id="y" name="colors" value="">
<input type="button" id="bl" name="colors" value="">
<input type="button" id="er" value="eraser">
<input type="button" id="p" value="+">
<input type="button" id="m" value="-">
<span>Size of brush: <span  id="sp"></span></span>
</div>

CSS

#panel {
            position: absolute;
            z-index: 1;
            border-style: solid;
            border-color: indigo;
            background-color: beige;
            width: 450px;
        }
        #r {
            background-color: red;
            margin-left: 50px;
            width: 25px;
            color: white;
        }
        #b {background-color: blue;
            width: 25px;
            color: white;
        }
        #g {background-color: green;
            width: 25px;
            color: white;
        }
        #y {background-color: yellow;
            width: 25px;
            color: white;
        }
        #er {background-color: white;
        }
        #bl {background-color: black;
            width: 25px;
            color: white;
        }
        body {background-color: white}
        * {user-select: none;}

JavaScript

colorOfBrush = 'red';
    startSize = 30;
    var colorsArray = document.getElementsByName('colors');
    for (var i = 0; i < colorsArray.length; i++) {
    colorsArray[i].onclick = function () {
        colorOfBrush = window.getComputedStyle(this).backgroundColor;
        for (var i = 0; i < colorsArray.length; i++) {
        if (colorsArray[i] != this) {colorsArray[i].value = ''}
        }
        this.value = 'x';
    }
    }
    er.onclick = function () {
       colorOfBrush = 'white'
    }
    p.onclick = function () {
        startSize += 3;
        sp.innerHTML = startSize + 'px';
    }
    m.onclick = function () {
        if (startSize <= 0) {startSize = 1}
        startSize -= 3;
        sp.innerHTML = startSize + 'px';
    }
    var pressMouse = false;
    window.onmousedown = function () {
        pressMouse = true;
        console.log(pressMouse);
    }
    window.onmouseup = function () {
        pressMouse = false;
        console.log(pressMouse);
    }
    window.onmousemove = function (e) {
        if (!pressMouse) {return}
        div = document.createElement('div');
        div.style.width = startSize + 'px';
        div.style.height = startSize + 'px';
        div.style.top = e.clientY + 'px';
        div.style.left = e.clientX + 'px';
        div.style.zIndex = 0;
        div.style.backgroundColor = colorOfBrush;
        div.style.borderRadius = '50%';
        div.style.position = 'absolute';
        document.body.appendChild(div);
    }