From f2e384ce68dcaba357c2e10a836c50feb066f08d Mon Sep 17 00:00:00 2001
From: waffles517 <32596991+waffles517@users.noreply.github.com>
Date: Sat, 27 Oct 2018 09:50:33 -0500
Subject: [PATCH] HTML Elements: Expand Canvas article from a stub (#20048)
Expand article from a stub
Adds example code and a basic description of what the canvas tag does
---
.../english/html/elements/canvas-tag/index.md | 23 +++++++++++++++----
1 file changed, 18 insertions(+), 5 deletions(-)
diff --git a/guide/english/html/elements/canvas-tag/index.md b/guide/english/html/elements/canvas-tag/index.md
index 01af311a51..fa43b851db 100644
--- a/guide/english/html/elements/canvas-tag/index.md
+++ b/guide/english/html/elements/canvas-tag/index.md
@@ -3,13 +3,26 @@ title: Canvas Tag
---
## Canvas Tag
-This is a stub. Help our community expand it.
-
-This quick style guide will help ensure your pull request gets accepted.
-
+You can use a canvas to draw and animate graphics. The drawings are done with JavaScript, so you will want to have an id in order to select the canvas.
+```html
+
+```
+Once you've made your canvas, you need to find it and make a drawing object.
+```javascript
+// Find canvas
+var canvas = document.getElementById("canvas");
+// Make drawing object
+var drawOnCanvas = canvas.getContext("2d");
+// Draw a rectangle on the canvas!
+drawOnCanvas.fillRect(50, 50, 150, 100);
+```
+Now you can use this drawing object to draw on your canvas. There are several methods and attributes you can use for your drawing, including `rect()`, `fillStyle`, and many more.
+
+
#### More Information:
-
+Canvas Reference