<canvas id="game" />
body {
  margin: 0;

#game {
  background-color: #222;
  width: 100%;
  height: 100%;
// Reference to the canvas instance
const canvas = document.getElementById("game");
const context = canvas.getContext("2d");

// Set the canvas dimensions to match that of the screen
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

// Draw a black rectangle to fill the entire canvas
context.fillStyle = "black";
context.fillRect(0, 0, canvas.width, canvas.height);

// --- Draw a line ---

// Tell the context we want to begin a path
// Move the pen to the top left corner of the canvas
context.moveTo(0, 0);
// Draw a line with the pen to the bottom right corner of the canvas
context.lineTo(canvas.width, canvas.height);
// Set the context stroke style to white
context.strokeStyle = "white";
// Draw a the line
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.