From 2327e6cc5dc28a73d184c4399b69671ad5dc2d85 Mon Sep 17 00:00:00 2001
From: Zach Lumpkins <zdoc01@users.noreply.github.com>
Date: Wed, 17 Apr 2019 15:00:35 -0700
Subject: [PATCH] Minor edits to animation-in-canvas guide code (#31185)

* docs(guide): minor edits to animation-in-canvas

* Use ES6 syntax in code examples
* Clean up formatting in code examples for clarity
* Remove unnecessary sentence for brevity

* docs(guide): use arrow functions for canvas animation examples
---
 .../canvas/animation-in-canvas/index.md       | 25 +++++++++----------
 1 file changed, 12 insertions(+), 13 deletions(-)

diff --git a/guide/english/canvas/animation-in-canvas/index.md b/guide/english/canvas/animation-in-canvas/index.md
index bad7b7fb56..bf4d42b071 100644
--- a/guide/english/canvas/animation-in-canvas/index.md
+++ b/guide/english/canvas/animation-in-canvas/index.md
@@ -6,28 +6,27 @@ title: Animation
 To animate things in `canvas`, use `window.requestAnimationFrame` to set up a draw loop.
 
 ```js
-function draw() {
+const draw = () => {
   /* code goes here */
   window.requestAnimationFrame(draw);
-}
+};
 window.requestAnimationFrame(draw);
 ```
 
-The below code will cause the `draw` function to be run every frame.
-
 `canvas` has no special functions that allow for animating. You just have to be used to writing in animation loops. The usual design paradigm for animation loops is to update the state, then draw the state. For instance, to draw a square moving across the screen:
 
 ```js
-canvas = document.getElementById("canvas");
-ctx = canvas.getContext('2d');
+const canvas = document.getElementById('canvas');
+const ctx = canvas.getContext('2d');
 
-var x=0;
-var y=50;
-function draw() {
+const y = 50;
+let x = 0;
+const draw = () => {
   // reset canvas
   ctx.clearRect(0, 0, canvas.width, canvas.height);
-  //update state
-  x+=1;
+
+  // update state
+  x += 1;
 
   // render state
   ctx.beginPath();
@@ -35,11 +34,11 @@ function draw() {
   ctx.fill();
 
   window.requestAnimationFrame(draw);
-}
+};
 window.requestAnimationFrame(draw);
 ```
 
-To see this concept in action, see the '[Particle Sim](/articles/canvas/particle-sim)' page.
+To see this concept in action, see the [Particle Sim](/articles/canvas/particle-sim) page.
 
 #### More Information: