Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/tholman/s.js
Canvas JavaScript polyfill for the vital and pivotal S we all drew in school.
https://github.com/tholman/s.js
canvas html5 polyfill s
Last synced: 3 days ago
JSON representation
Canvas JavaScript polyfill for the vital and pivotal S we all drew in school.
- Host: GitHub
- URL: https://github.com/tholman/s.js
- Owner: tholman
- Created: 2017-12-28T03:30:09.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2021-10-01T20:05:30.000Z (about 3 years ago)
- Last Synced: 2024-04-14T07:44:30.531Z (7 months ago)
- Topics: canvas, html5, polyfill, s
- Language: JavaScript
- Homepage:
- Size: 6.84 KB
- Stars: 51
- Watchers: 3
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
README
## S.JS
The web canvas is a powerful tool, the API is fairly straight forward, and provides us with the tools to draw almost anything. Circles, squares and lines are the building blocks we have used since the dawn of time...
That said, there is also one other basic shape... that we all learn in school... passed down through generations... as old as time... no one really knows its origin. That shape is:
![The S itself](https://i.imgur.com/sGpeOem.png)
This polyfill bridges the missing link, moving the canvas from a tool for children, to a tool for adults.
## Syntax
`void ctx.s(x, y, width, height);`#### Parameters
**`x`**
The x axis of the coordinate for the S starting point.**`y`**
The y axis of the coordinate for the S starting point.**`width`**
The S's width.**`height`**
The S's height.## Usage
The `s` function works similar to canvas's `rect` functionality. Once the script is included on the page, you can run both the `stroke` and `fill` functions.
#### HTML
```html````
#### JavaScript```javascript
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.fillStyle = "rebeccapurple";
ctx.s(10, 10, 100, 100);
ctx.fill();
ctx.stroke();
```## Licence
Creative Commons ... its not like someone could restrict usage of the beloved S