@@ -14,6 +14,7 @@ <h1>Some Simple P5 Tutorials</h1>
       <li><a href="create-canvas.html">createCanvas()</a></li>
       <li><a href="background.html">background()</a></li>
       <li><a href="point.html">point()</a></li>
+      <li><a href="rect.html">rect()</a></li>
       <li><a href="translate-and-rotate.html">translate() and rotate()</a></li>
       <li><a href="ellipse.html">ellipse()</a></li>
       <li><a href="save.html">save()</a></li>
 
@@ -0,0 +1,13 @@
+'use strict';
+
+const WIDTH = 640,
+    HEIGHT = 480;
+
+function setup() {
+    createCanvas(WIDTH, HEIGHT);
+}
+
+function draw() {
+    // Read more at https://p5js.org/reference/#/p5/rect
+    rect(0, 0, (WIDTH/2), (HEIGHT/2));
+}
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+   <meta charset="utf-8">
+   <title>rect | P5 Tutorial</title>
+   <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.0/p5.min.js"
+           integrity="sha256-GDuv15eqQpLqWvLkRnd+EvvsHLngEUnerY5BDSYfLuM="
+           crossorigin="anonymous"></script>
+   <script src="js/rect.js"></script>
+
+   <!-- Delete the following CSS if you don’t want a border around your canvas. -->
+   <style>canvas { border: 1px solid #ddd; }</style>
+</head>
+<body><!-- Your P5 code does not go here. It goes in js/rect.js. --></body>
+</html>