Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/foo123/canvaslite
An html canvas implementation in pure JavaScript
https://github.com/foo123/canvaslite
canvas
Last synced: about 1 month ago
JSON representation
An html canvas implementation in pure JavaScript
- Host: GitHub
- URL: https://github.com/foo123/canvaslite
- Owner: foo123
- Created: 2023-07-30T06:23:30.000Z (over 1 year ago)
- Default Branch: master
- Last Pushed: 2023-08-02T09:56:15.000Z (over 1 year ago)
- Last Synced: 2023-08-02T10:42:24.437Z (over 1 year ago)
- Topics: canvas
- Language: JavaScript
- Homepage:
- Size: 170 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# CanvasLite
An html canvas implementation in pure JavaScript
**version: 0.9.92r2** (71 kB minified)
**Uses:**
1. [Gradient](https://github.com/foo123/Gradient)
2. [Rasterizer](https://github.com/foo123/Rasterizer)
**What is not supported:**
1. `lineDash`/`lineDashOffset` (**will be** implemented)
2. `strokeText`/`fillText`/`measureText` .. (will **not** be implemented but can be done by drawing the actual curves in the font)
3. `shadow`/`shadowBlur`/`shadowColor` .. (will **not** be implemented but is easy to do)
**test/demo:**
```js
const CanvasLite = require(__dirname + '/../build/CanvasLite.js');
// colorful peace sign
const canvas = new CanvasLite(300, 300);
const ctx = canvas.getContext('2d');
const gradient = ctx.createLinearGradient(20, 20, 180, 180);
gradient.addColorStop(0.0, 'red');
gradient.addColorStop(0.33, 'yellow');
gradient.addColorStop(0.66, 'green');
gradient.addColorStop(1.0, 'blue');
ctx.strokeStyle = gradient;
ctx.lineWidth = 21;
ctx.beginPath();
ctx.arc(125, 125, 106, 0, 2*Math.PI);
ctx.closePath();
ctx.moveTo(125, 19);
ctx.lineTo(125, 19+212);
ctx.moveTo(125, 125);
ctx.lineTo(125-75, 125+75);
ctx.moveTo(125, 125);
ctx.lineTo(125+75, 125+75);
ctx.stroke();
// save drawing to disk
canvas.toPNG().then((png) => require('fs').writeFile(__dirname + '/peacecolor.png', png, (err) => {
if (err)
{
console.log(err);
}
else
{
// read the image back to canvas and resize it
const img = new CanvasLite.Image();
img.onload = () => {
const canvas2 = new CanvasLite(200, 200);
canvas2.getContext('2d').drawImage(img, 0, 0, 300, 300, 0, 0, 200, 200);
canvas2.toPNG().then((png) => require('fs').writeFile(__dirname + '/peacecolor2.png', png, (err) => {
if (err) console.log(err);
}));
};
img.src = __dirname + '/peacecolor.png';
}
}));
```
**result:**
