Erro no canvas | Programação | Alura - Cursos online de tecnologia

Sempre que aperto para desenhar no canvas, fica com uma qualidade horrível e ainda desenha muito longe do cursor do mouse, provavelmente o erro está no código JS mas não sei um jeito de arrumar.

Código HTML

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <title>Inicio | Paitzin</title>
    <link rel="stylesheet" href="CSS/reset.css">
    <link rel="stylesheet" href="CSS/style.css">
</head>
<body>
    <header class="cabecalhoPrincipal">
        <div class="conteiner">
            <h1 class="cabecalhoPrincipal__titulo">
                <a href="#">Paitzin</a>
            </h1>
        </div>
    </header>
    <main class="conteudoPrincipal">
        <div class="container">
            <div class="conteudoPrincipal__Escolha">
                <input type="range" name="tamanho" id="tamanho" min="1" max="100">
                <label for="cor">Escolha uma cor
                <input type="color" name="cor" id="cor">
            </div>
            <div class="conteudoPrincipal__Canvas">
                <canvas class="canvas__main" id="tela"></canvas>
            </div>
        </div>
        <script src="JS/paint.js"></script>
    </main>
    <footer>

    </footer>
</body>
</html>

Código CSS

.cabecalhoPrincipal{
    background-color: rgba(220, 20, 60, 80%);
}

.cabecalhoPrincipal .conteiner{
    display: flex;
    align-items: center;
    justify-content: space-around;
    height: 7rem;
}

.cabecalhoPrincipal__titulo{
    display: flex;
    text-transform: uppercase;
    font-size: 2rem;
    font-weight: bold;
}

.cabecalhoPrincipal__titulo a{
    text-decoration: none;
    color: rgba(0, 0, 0, 80%);
    box-shadow: 2px 2px 2px 2px #000000;
}

.conteudoPrincipal .container{
    display: flex;
    align-items: center;
}

.conteudoPrincipal__Escolha{
    display: flex;
    width: 15%;
    height: 100vh;
    flex-wrap: wrap;
    justify-content: space-around;
    background-color: rgba(0, 0, 0, 0.322);
    border: 2px solid #00FFFF;
}

.conteudoPrincipal__Canvas{
    display: flex;
    width: 85%;
    border: 2px solid #000000;
}

.canvas__main{
    width: 100%;
    height: 100vh;
}

Código JS

var tela = document.getElementById("tela");
paleta = document.getElementById("cor");
tamanho = document.getElementById("tamanho");
var pincel = tela.getContext("2d");

pincel.fillStyle = "gray";
pincel.fillRect(0, 0, 300, 150);


var desenha = false;

tela.onmousemove = function(evento)
{
    var x = evento.pageX - tela.offsetLeft;
    var y = evento.pageY - tela.offsetTop;

    if(desenha)
    {
        pincel.fillStyle = paleta.value;
        pincel.beginPath();
        pincel.arc(x, y, tamanho.value, 0, 2 * 3,14);
        pincel.fill();
    }
    console.log(x + ',' + y);
}

tela.onmousedown = function()
{
    desenha = true;
}

tela.onmouseup = function()
{
    desenha = false;
}