1<div style="width:500px;height:100px;border:1px solid #000;">This is a rectangle!</div>
1const canvas = document.getElementById('pong') // first make a index . html with a canvas height and width and id of pong or whatever
2// and then we have to get access to our context to draw on it
3const context = canvas.getContext('2d')
4
5// then you do...
6
7context.drawRect(20, 20, 150, 150);
8context.fillStyle = '#fff' // thats white!!
1//Assuming you have canvas and context (ctx) set up:
2ctx.fillStyle = "(enter color)";
3ctx.fillRect(x, y, width, height);
4//to set up canvas and context:
5var canvas = document.getElementById("(enter canvas's id)");
6var ctx = canvas.getContext("2d");
1<html>
2<head>
3 <meta charset="UTF-8">
4 <title>Pong</title>
5 <script language="Javascript" type="text/Javascript" src="libraries/p5.js"></script>
6 <script language="Javascript" type="text/Javascript" src="pong.js" defer></script>
7 <style> body {padding: 0; margin: 0;} </style>
8</head>
9<body>
10 <canvas id="pong" width="600" height="400"></canvas>
11</body>
12</html>