JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="canvas1" width="500" height="500" style="border: solid 1px black;"></canvas>

JavaScript

var can = document.getElementById('canvas1');
var ctx = can.getContext('2d');
var HEIGHT = can.height;

    // Given an X,Y in 1st quadrant cartesian coordinates give the corresponding screen coordinate
    function cartToScreen(px, py) {
      return [px, -py + HEIGHT];
    };

    var coords = cartToScreen(50,50);
    // draws 50 pixels from the bottoom instead of 50 pixels from the top
    ctx.fillText("lalala", coords[0], coords[1]);