https://github.com/matej-ch/shapes

Generating random shapes with canvas for backgrounds
https://github.com/matej-ch/shapes

canvas javascript shape

Last synced: 2 days ago
JSON representation

Generating random shapes with canvas for backgrounds

• Host: GitHub
• URL: https://github.com/matej-ch/shapes
• Owner: Matej-ch
• Created: 2021-09-30T17:36:23.000Z (about 3 years ago)
• Default Branch: main
• Last Pushed: 2022-10-19T19:24:04.000Z (about 2 years ago)
• Last Synced: 2024-05-28T22:07:06.220Z (6 months ago)
• Topics: canvas, javascript, shape
• Language: JavaScript
• Homepage:
• Size: 298 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
### Random shapes

Shapes created with canvas, can be user as background on webpage

### Install

``

npm i bg_shapes --save

``

### Usage

```javascript

import SBackgroundCreator from "./js/SBackgroundCreator";

window.onload = function () {

    const canvasEl = document.getElementById('canvas');

    

    /** create new background on given canvas element */

    /** available options 

     * fillShape = true,

     * numShapes = 10,

     * alpha = true,

     * bgColor = 'black', 

     * globalCompositeOperation = 'multiply'

     * */

    const bg = new SBackgroundCreator(canvasEl,{

        fillShape: true,

        numShapes: 20,

        bgColor:'linear-gradient(0.15turn, rgb(223, 185, 106, 1), rgb(135, 190, 231, 1)90% )'

    });

    /** use before init if you want remove some shapes */

    /** available values: Rectangle, Circle, Cube, Line, Triangle, Wave, Heart, SemiCircle */

    bg.deactivateShapes(['Heart','SemiCircle','Circle','Cube','Triangle']);

    

    /** initialize shapes */

    bg.init();

    /** draw shapes on page */

    bg.draw();

}

```