https://github.com/taiseen/learning-html-canvas-fabric-js

https://github.com/taiseen/learning-html-canvas-fabric-js

canvas fabric-js html5 javascript

Last synced: 3 days ago
JSON representation

• Host: GitHub
• URL: https://github.com/taiseen/learning-html-canvas-fabric-js
• Owner: taiseen
• Created: 2022-09-21T13:11:03.000Z (about 2 years ago)
• Default Branch: main
• Last Pushed: 2022-09-28T02:38:07.000Z (about 2 years ago)
• Last Synced: 2024-11-13T10:13:37.930Z (3 days ago)
• Topics: canvas, fabric-js, html5, javascript
• Language: JavaScript
• Homepage: https://taiseen.github.io/learning-html-canvas-fabric-js
• Size: 102 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
> 21 - Sep - 2022

### [Learning Demo](https://taiseen.github.io/html-canvas-fabric-Js-learning) 

## Study reference links are :- 

## Text

* [W3School - HTML5 Canvas](https://www.w3schools.com/html/html5_canvas.asp)

* [W3School - Reference](https://www.w3schools.com/tags/ref_canvas.asp)

## Video

#### HTML Canvas Tutorial | Hindi

* Playlist video: 1 to 9 

* Duration: 1h 56m

* [Youtube Link](https://www.youtube.com/playlist?list=PL7akPJI4biSLkVuxhfj0M7Gje7IiY-Aih)

#### Fabric.js Tutorial | Short

* Playlist video: 1 to 6 

* Duration: 14m

* [Youtube Link](https://www.youtube.com/playlist?list=PLbu98QxRH81LlbbwYHMqOFjHwY3D48tEC)

#### Fabric.js Tutorial | Shapes

* Playlist video: 1 to 12 

* Duration: 3h 30m

* [Youtube Link](https://www.youtube.com/playlist?list=PL-gIJFyHJjykXg776HNz3H7XXzBMSu5mL)

```

Fabric.js

Fabric.js is a JavaScript library that let you control the HTML5 canvas element as an object. 

By using this library, we can add object into canvas.

1st we need a canvas & initialize it with Fabric.js.

Create an object by JavaScript & add into the canvas.

# Properties :

Each object has its own properties, such as top, left, width and height. 

You can override the default value.

# Methods :

Each object has its own useful methods.

We'll need them if we want to manipulate the canvas via JavaScript

```