Design a TypeScript program using HTML5 canvas that draws a red square with a width of 50 pixels at location (100, 100). Allow the user to adjust the square's size using a range input. Ensure that the square stays centered and that the canvas resizes proportionally to the window.
user
Sure, I can help you with that. Here's a starting point for your TypeScript program that uses HTML5 canvas.

HTML:

```html
<!DOCTYPE html>
<html>
  <head>
    <title>Canvas with Resizing Square</title>
    <style>
      #canvas {
        border: 1px solid black;
      }
    </style>
  </head>
  <body>
    <h1>Canvas with Resizing Square</h1>
    <canvas id="canvas" width="800" height="600"></canvas>
    <br>
    <input type="range" min="50" max="200" value="50" step="5">
    <script src="script.js"></script>
  </body>
</html>
```

TypeScript:

```typescript
const canvas = document.getElementById('canvas')!;
const ctx = canvas.getContext('2d');

const width = canvas.width;
const height = canvas.height;

ctx.fillStyle = 'red';

let squareWidth = 50;

function drawSquare() {
  ctx.clearRect(0, 0, width, height);
  ctx.fillRect(100, 100, squareWidth, squareWidth);
}

const slider = document.querySelector('input[type="range"]');
slider.addEventListener('input', () => {
  squareWidth = Number(slider.value);
  drawSquare();
  window.addEventListener('resize', drawSquare);
});

drawSquare();

window.addEventListener('resize', () => {
  drawSquare();
});
```

This will render a red square at `(100, 100)` with a default width of 50 pixels. The filled rectangle method `fillRect()` is used to fill in the square.

The `range` input listens to changes and changes squareWidth, which triggers a `drawSquare()` function.

The `drawSquare()` function clears the canvas, draws the square, and listens for resizing events. The `window.addEventListener('resize', drawSquare)` method will draw again when the screen size is changed.

Lastly, using `canvas.width` and `canvas.height` in the `drawSquare()` function will always guarantee that the square stays centred.
assistant
Design a TypeScript program using HTML5 canvas that draws a red square with a width of 50 pixels at location (100, 100). Allow the user to adjust the square's size using a range input. Ensure that the square stays centered and that the canvas resizes proportionally to the window.
user
Here's a TypeScript program that fulfills the requirements:

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Resizable Red Square</title>
    <style>
        body, html { margin: 0; padding: 0; overflow: hidden; }
        #canvas { display: block; }
    </style>
</head>
<body>
    <canvas id="canvas"></canvas>
    <input type="range" id="sizeRange" min="10" max="200" value="50">
    <script src="app.js"></script>
</body>
</html>
```

```typescript
// app.ts

const canvas = document.getElementById("canvas") as HTMLCanvasElement;
const ctx = canvas.getContext("2d");
const sizeRange = document.getElementById("sizeRange") as HTMLInputElement;

let SquareSize = 50;

function resizeCanvas() {
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
  draw();
}

function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  const x = canvas.width / 2;
  const y = canvas.height / 2;

  ctx.beginPath();
  ctx.rect(x - SquareSize / 2, y - SquareSize / 2, SquareSize, SquareSize);
  ctx.fillStyle = "red";
  ctx.fill();
}

function updateSize() {
  SquareSize = parseInt(sizeRange.value);
  draw();
}

sizeRange.addEventListener("input", updateSize);

window.addEventListener("resize", resizeCanvas);
window.addEventListener("load", resizeCanvas);

resizeCanvas();
```

You'll need to compile `app.ts` using TypeScript. To do this, install TypeScript globally via npm (if you haven't already):

```bash
npm install -g typescript
```

Then compile the TypeScript file:

```bash
tsc app.ts
```

This will generate a JavaScript file named `app.js` that you can run in your browser. The resulting program displays a red square in the center of the canvas, allowing users to adjust its size using a range input. The canvas resizes proportionally to the window, and the square stays centered.

You may need to copy and paste the HTML code into an `index.html` file in the same folder as the TypeScript files, for this example to work correctly.
assistant