JSFiddle - React, Tailwind, and code Playground

HTML

<div class="trace"></div>

CSS

.trace{
    width: 400px;
    height: 200px;
    background: yellow;
}
.canvas{
    border: 1px #000 dotted;
}

JavaScript

var w = $(".trace").width();
var h = $(".trace").height();

var bgCanvas = $("<canvas></canvas>").addClass("canvas");
bgCanvas.attr({width: w, height:h});
var bgContext = bgCanvas[0].getContext("2d");

$(".trace").append(bgCanvas);

bgContext.strokeStyle = "#000";
bgContext.moveTo(0,0);
//this line should go to the middle of the canvas
//instead it goes much further both horizontally and vertically
bgContext.lineTo(200,100);
bgContext.stroke();