JSFiddle - React, Tailwind, and code Playground

by YOUNY zhu

HTML

<script src="https://getfirebug.com/firebug-lite-debug.js"></script>
<canvas id="myCanvas" width="578" height="200" style = "background: red"></canvas>

CSS

body {
        margin: 0px;
        padding: 0px;
      }

JavaScript

var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      var x = canvas.width/2;
      var y = canvas.height;

      context.font = '30pt Calibri';
      // textAlign aligns text horizontally relative to placement
      context.textAlign = 'center';
      // textBaseline aligns text vertically relative to font style
      //context.textBaseline = 'center';
      context.fillStyle = 'blue';
      context.fillText('Hello World!', x, y);