A simple object to draw on an HTML canvas.
https://www.npmjs.com/package/@pelevesque/canvas
@see index.html
npm install @pelevesque/canvas
npm test
setOptions
sets optionsresize
resizes the canvasclear
clears the canvasloadImage
loads an imageloadImages
loads multiple imagesimage
draws an imageimageResized
draws an image with resizingimageClipped
draws an image with clippingtext
draws texttextCompressed
draws text with a max widthline
draws a linelines
draws multiple linespolyline
draws a line with many segmentsquadraticCurve
draws a quadratic curvepolygon
draws a polygoncircle
draws a circlerectangle
draws a rectanglesquare
draws a squaregetMousePosition
gets the mouse position
When initializing canvas, you must provide it with the HTML id
of the
canvas you wish to use. Optionally, you may also override some default params
by passing an object as the second argument.
// Initialize canvas without params.
const canvas = new Canvas(id)
// Initialize canvas with overriding some params.
const canvas = new Canvas(id, {
backgroundColor: '#555555',
color: '#ffffff'
})
// List of default params.
defaultParams = {
globalCompositeOperationDefault: 'source-over',
backgroundColor: 'none',
backgroundImage: 'none',
color: '#000000',
border: 'none',
font: '16px Arial',
textAlign: 'center',
textBaseline: 'middle',
cursor: 'default'
}
Sets options.
const options = {
backgroundColor: '#336600',
border: '1px solid #006600',
}
canvas.setOptions(options)
Resizes the canvas.
const width = 500
const height = 200
canvas.resize(width, height)
Clears the canvas.
canvas.clear()
Loads an image.
canvas.loadImage(src)
Loads multiple images.
canvas.loadImages(sources)
Draws an image.
canvas.image(src, x, y)
canvas.image(src, x, y, globalCompositeOperation)
Draws an image with resizing.
canvas.imageResized(src, x, y, width, height)
canvas.imageResized(src, x, y, width, height, globalCompositeOperation)
Draws an image with clipping.
canvas.imageClipped(src, sx, sy, swidth, sheight, x, y, width, height)
canvas.imageClipped(src, sx, sy, swidth, sheight, x, y, width, height, globalCompositeOperation)
Draws text.
fillStyle
, font
, textAlign
, and textBaseline
are optional.
const text = 'hello cruel world!'
const x = 10
const y = 10
const fillStyle = '#444444'
const font = '24px Helvetica'
const textAlign = 'left'
const textBaseline = 'bottom'
canvas.text(text, x, y, fillStyle, font, textAlign, textBaseline)
Draws text with a max width.
fillStyle
, font
, textAlign
, and textBaseline
are optional.
const text = 'hello cruel world!'
const x = 10
const y = 10
const maxWidth = 30
const fillStyle = '#444444'
const font = '24px Helvetica'
const textAlign = 'left'
const textBaseline = 'bottom'
canvas.textCompressed(text, x, y, maxWidth, fillStyle, font, textAlign, textBaseline)
Draws a line.
strokeStyle
and strokeWidth
are optional.
const x1 = 10
const y1 = 10
const x2 = 100
const y2 = 120
const strokeStyle = '#666666'
const strokeWidth = '2'
canvas.line(x1, y1, x2, y2, strokeStyle, strokeWidth)
Draws multiple lines.
strokeStyle
and strokeWidth
are optional.
const lines = [
[10, 10, 100, 100],
[25, 25, 200, 120],
[30, 30, 400, 300]
]
const strokeStyle = '#666666'
const strokeWidth = '2'
canvas.lines(lines, strokeStyle, strokeWidth)
Draws a line with many segments.
strokeStyle
and strokeWidth
are optional.
const lines = [
[10, 10],
[25, 25],
[200, 150],
[120, 50]
]
const strokeStyle = '#666666'
const strokeWidth = '2'
canvas.polyline(lines, strokeStyle, strokeWidth)
Draws a quadratic curve.
strokeStyle
and strokeWidth
are optional.
const x1 = 10
const y1 = 10
const x2 = 100
const y2 = 120
const qx = 50
const qy = 100
const strokeStyle = '#666666'
const strokeWidth = '2'
canvas.quadraticCurve(x1, y1, x2, y2, qx, qy, strokeStyle, strokeWidth)
Draws a polygon.
fillStyle
, strokeStyle
, and strokeWidth
are optional.
const coords = [
[10, 10],
[200, 20],
[130, 100],
[45, 70]
]
const fillStyle = '#ff0000'
const strokeStyle = '#666666'
const strokeWidth = '2'
canvas.polygon(coords, fillStyle, strokeStyle, strokeWidth)
Draws a circle.
fillStyle
, strokeStyle
, and strokeWidth
are optional.
const cx = 10
const cy = 10
const radius = 40
const fillStyle = '#ff0000'
const strokeStyle = '#666666'
const strokeWidth = '2'
canvas.circle(cx, cy, radius, fillStyle, strokeStyle, strokeWidth)
Draws a rectangle.
fillStyle
, strokeStyle
, and strokeWidth
are optional.
const x = 15
const y = 15
const w = 100
const h = 200
const fillStyle = '#ff0000'
const strokeStyle = '#666666'
const strokeWidth = '2'
canvas.rectangle(x, y, w, h, fillStyle, strokeStyle, strokeWidth)
Draws a square.
fillStyle
, strokeStyle
, and strokeWidth
are optional.
const x = 25
const y = 300
const w = 100
const fillStyle = '#ff0000'
const strokeStyle = '#666666'
const strokeWidth = '2'
canvas.square(x, y, w, fillStyle, strokeStyle, strokeWidth)
Gets the mouse position.
const mousePosition = canvas.getMousePosition()
const x = mousePosition.x
const y = mousePosition.y