2018-10-12 15:37:13 -04:00
---
title: Canvas
---
## HTML5 Canvas
2019-03-28 09:35:41 +01:00
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!
2018-10-12 15:37:13 -04:00
2018-12-07 20:00:37 +11:00
## Usage
2018-10-12 15:37:13 -04:00
2018-12-07 20:00:37 +11:00
```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.
2018-10-12 15:37:13 -04:00
2018-12-07 20:00:37 +11:00
#### More Information
2018-10-12 15:37:13 -04:00
2018-12-07 20:00:37 +11:00
- [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 )
