Summer-canvas NPM

summer

install

yarn add summer-canvas

example

.html
<canvas id="canvas"></canvas>

.js

import Summer from 'summer-canvas'

const shareCanvas = new Summer({
    ratio: 1,
    canvasId: 'canvas',
    canvasWidth: 343,
    canvasHeight: 'auto',
    radius: 30,
    tasks: [
        {
            type: 'rect',
            id: 'top_cicle_border',
            radius: 80,
            x: 90,
            y: 0,
            width: 162,
            height: 162,
            background: {
                color: 'linear(to s, 0 #fff7be, 100% #f9b71c)'
            }
        }
    ]
})

shareCanvas.draw((img: string, size: { width: string, height: string }) => {

})

method

new Summer(SummerOptions)
draw(doneCallback)
addDraw(ElementOptions)

options

SummerOptions

option	type	description
canvasId	string	canvas element id
canvasWidth	number
canvasHeight	'auto'
tasks	(ImgOptions \| RectOptions \| TextOptions \| WrapOptions)[]
ratio?	number	set in a variety of sizes
border?	BorderOptions
background?	BackgroundOptions
radius?	number

ImgOptions extends TaskBaseOptions

option	type	description
type	'img'
width	number
height?	number
img	ImgInfoOptions \| string
mode?	'contain' \| 'cover' \| 'fill'
backgroundColor?	string
shadow?	BoxShadowOptions
border?	BorderOptions

RectOptions extends TaskBaseOptions

option	type	description
type	'rect'
border?	BorderOptions
background?	BackgroundOptions
shadow?	BoxShadowOptions

TextOptions extends TaskBaseOptions

option	type	description
type	'text'
text	string
width?	number
fontSize?	number
lineHeight?	number
maxLine?	number
lastLineLeastNum?	number
color?	string
background?	BackgroundOptions
radius?	number
border?	BorderOptions
padding?	PaddingOptions
fontWeight?	'normal' \| 'lighter' \| 'bold' \| number
textAlign?	'left' \| 'center' \| 'right' \| 'start' \| 'end'

WrapOptions extends TaskBaseOptions

option	type	description
type	'wrap'
width?	number
height?	number	'auto'
background?	BackgroundOptions
radius?	number
padding?	number
border?	BorderOptions
tasks	(ImgOptions \| RectOptions \| TextOptions \| WrapOptions)[]