JSFiddle - React, Tailwind, and code Playground

HTML

<div id="div_wrapper">
    <canvas id="primary_canvas" width="400" height="400"></canvas>
    <canvas id="secondary_canvas" width="400" height="400"></canvas>
</div>

JavaScript

primaryCanvas = document.getElementById('primary_canvas');
primaryContext = changeResolution(primaryCanvas, 1);
setContextStyle(primaryContext);

drawCircle(primaryContext, 100, 100, 20); // ну ебаный в рот на координатах (100;100) тоже не рисует

function drawCircle(context, x, y, r) {
    console.log("CIRCLE X" + x + " Y" + y + " R" + r);
    console.log(context);
    context.beginPath();
    context.lineWidth = 3;
    context.arc(x, y, r, 0, 2 * Math.PI);
    context.stroke();
}

// source: https://stackoverflow.com/questions/14488849/higher-dpi-graphics-with-html5-canvas
function changeResolution(canvas, scaleFactor) {
    // Set up CSS size.
    canvas.style.width = canvas.style.width || canvas.width + 'px';
    canvas.style.height = canvas.style.height || canvas.height + 'px';

    // Resize canvas and scale future draws.
    canvas.width = Math.ceil(canvas.width * scaleFactor);
    canvas.height = Math.ceil(canvas.height * scaleFactor);
    var ctx = canvas.getContext('2d');
    ctx.scale(scaleFactor, scaleFactor);
    return ctx;
}

function setContextStyle(context) {
    context.strokeStyle = context.fillStyle = 'rgb(50, 104, 168)';
    context.lineJoin = 'butt';
}