gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

HTML Elements: Expand Canvas article from a stub (#20048)

Browse Source 
Expand article from a stub

Adds example code and a basic description of what the canvas tag does
This commit is contained in:
waffles517
2018-10-27 09:50:33 -05:00
committed by Huyen Nguyen
parent 8d5569131a
commit f2e384ce68
1 changed files with 18 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
guide/english/html/elements/canvas-tag/index.md
View File

@ -3,13 +3,26 @@ title: Canvas Tag
---
## Canvas Tag
This is a stub. <a href='https://github.com/freecodecamp/guides/tree/master/src/pages/html/elements/canvas-tag/index.md' target='_blank' rel='nofollow'>Help our community expand it</a>.
<a href='https://github.com/freecodecamp/guides/blob/master/README.md' target='_blank' rel='nofollow'>This quick style guide will help ensure your pull request gets accepted</a>.
<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds -->
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
<canvas id="canvas" width="200px" height="200px">
</canvas>
```
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:
<!-- Please add any articles you think might be helpful to read before writing the article -->
<a href="https://www.w3schools.com/graphics/canvas_reference.asp">Canvas Reference</a>