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

Add the section "## Usage" (#30251)

Browse Source 
* Add the section "## Usage"

* Added code formatting to OP's PR
This commit is contained in:
Pranati Dutta Roy
2018-12-07 20:00:37 +11:00
committed by Manish Giri
parent 05eb597ca0
commit c012f70ac3
1 changed files with 17 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
guide/english/canvas/index.md
View File

@ -5,9 +5,23 @@ title: Canvas
Canvas is a technology introduced in HTML5 which can be accessed by the `<canvas>` tag. It allows graphics to be drawn via Javascript, and is a powerful tool for interactivity on all modern web browsers. Learn how to draw shapes, manipulate photos, build games, and animate virtually anything following the links below!
#### More Information:
## Usage
```html
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000111;"></canvas>
</body>
</html>
```
1. In the above example, the `"id=myCanvas"` attribute is referred by JavaScript.
2. The `"width"` & `"height"` attributes are necessary to define the size of the canvas.
3. By default, `<canvas>` element has no border & no content. So, to add a border we use the `"style"` attribute.
4. We can have multiple `<canvas>` elements on one HTML page.
#### More Information
- [MDN Canvas API](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API)
- [HTML Canvas Deep Dive](https://joshondesign.com/p/books/canvasdeepdive/title.html)