<html lang="en">
  <head>
    <meta charset="utf-8"/>
    <title>Functions: Task 2</title>
 
    <link rel="stylesheet" href="../styles.css" />
  </head>

  <body>

    <section class="preview">

    </section>

    <canvas width="480" height="320">

    </canvas>

  </body>

</html>
p {
  color: purple;
  margin: 0.5em 0;
}

* {
  box-sizing: border-box;
}

canvas {
  border: 1px solid black;
}
const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');

const x = 50;
const y = 60;
const width = 100;
const height = 75;
const color = 'blue';

// Add your code here

function drawRect() {
  ctx.clearRect(0, 0 ,canvas.width, canvas.height);
  ctx.fillStyle=color;
  /* My original code which could be replaced by the last code in this function
  ctx.beginPath();
  ctx.rect(x, y, width, height);
  ctx.fill();*/
  ctx.fillRect(x, y, width, height);
}

drawRect();

// Don't edit the code below here!

const section = document.querySelector('section');
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.