JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="myCanvas" width="400" height="400">
Sorry, but your browser does not support the HTML5 canvas tag.
</canvas>

CSS

canvas {
    border: 1px solid black;
}

JavaScript

// "Crappy PONG" -- step by step
//
// Step 0: Introducing a Paddle
/*

Create a simple paddle object, with position and size attributes, 
and the ability to render itself.

*/

// Comment this out when you want to see the results
STOP;

"use strict";

/* jshint browser: true, devel: true, globalstrict: true */

var g_canvas = document.getElementById("myCanvas");
var g_ctx = g_canvas.getContext("2d");

/*
0        1         2         3         4         5         6         7         8         9
123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890
*/

// ============
// PADDLE STUFF
// ============

/*
Note the use of centre-based coordinates.

It just turns out to be better in the long-run,
mainly because it leads to pleasing symmetries.
*/

var g_paddle = {
    cx: 30,
    cy: 100,

    HALF_WIDTH: 10,
    HALF_HEIGHT: 50
};

g_paddle.render = function (ctx) {
    ctx.fillRect(this.cx - this.HALF_WIDTH, 
                 this.cy - this.HALF_HEIGHT, 
                 this.HALF_WIDTH * 2,
                 this.HALF_HEIGHT * 2);
};

// =========
// RENDERING
// =========

function renderSimulation(ctx) {
    g_paddle.render(ctx);
}

// ============
// DO SOMETHING
// ============

renderSimulation(g_ctx);