Last active
January 29, 2018 18:27
-
-
Save gmisail/a6b98227a5d649352268777756dba9e3 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var canvas = document.getElementById("view"); // get the canvas context from our webpage | |
| var context = canvas.getContext("2d"); // get the 2d context from our canvas. our canvas has several contexts, however we want to get the 2D context. | |
| var x = 0; // x variable that is equal to 0 | |
| var y = 0; // y variable that is equal to 0 | |
| function drawRectangle(){ // function called drawRectangle that draws a rectangle for us | |
| context.fillStyle = "black"; // set the context state to "black." Everything in canvas is drawn using this state. If you don't change it, then it will forever have these properties. | |
| context.fillRect(x, y, 16, 16); // fill a rectangle with our x and y positions. | |
| } | |
| function redraw(){ | |
| x += 1; // increase by 1 | |
| y += 1; | |
| drawRectangle(); // draw it | |
| window.requestAnimationFrame(redraw); // update | |
| } | |
| window.requestAnimationFrame(redraw); // start updating |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment