JSFiddle - React, Tailwind, and code Playground

HTML

<!doctype html>
<html>
        <head>
            <title>Тупая демка</title>
        </head>
        <body>
        <script type="text/javascript" src='c.js'></script>
            <canvas id="cnv" width="400" height="400"></canvas>
            <script type="text/javascript" src='example.js'></script>
        </body>
</html>

JavaScript

(function(){

var ctx = document.getElementById('cnv').getContext('2d');

ctx.save() //Сохраним состояние
ctx.translate(100,100)  //Сместим начало координат
ctx.scale(0.65,1.5)
ctx.textBaseline = 'top'
ctx.font = "bold italic 30px sans-serif"
ctx.strokeText("Привет Хабр",0,0) //Казалось бы рисуем в точке (0;0), а текст рисуется не в угле холста
ctx.restore()  //Восстановим состояние, на самом деле не обязательно, но лучше восстановить
    
})();