@pelevesque/canvas
v1.0.4
Published
A simple object to draw on an HTML canvas.
Downloads
15
Readme
canvas
A simple object to draw on an HTML canvas.
Node Repository
https://www.npmjs.com/package/@pelevesque/canvas
Example
@see index.html
Installation
npm install @pelevesque/canvas
Tests
Standard Style
npm test
Methods
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
Usage
Initialization
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'
}
Set Options
Sets options.
const options = {
backgroundColor: '#336600',
border: '1px solid #006600',
}
canvas.setOptions(options)
Resize
Resizes the canvas.
const width = 500
const height = 200
canvas.resize(width, height)
Clear
Clears the canvas.
canvas.clear()
Load Image
Loads an image.
canvas.loadImage(src)
Load Images
Loads multiple images.
canvas.loadImages(sources)
Image
Draws an image.
required params
canvas.image(src, x, y)
with optional params
canvas.image(src, x, y, globalCompositeOperation)
Image Resized
Draws an image with resizing.
required params
canvas.imageResized(src, x, y, width, height)
with optional params
canvas.imageResized(src, x, y, width, height, globalCompositeOperation)
Image Resized
Draws an image with clipping.
required params
canvas.imageClipped(src, sx, sy, swidth, sheight, x, y, width, height)
with optional params
canvas.imageClipped(src, sx, sy, swidth, sheight, x, y, width, height, globalCompositeOperation)
Text
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)
Text Compressed
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)
Line
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)
Lines
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)
Polyline
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)
Quadratic Curve
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)
Polygon
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)
Circle
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)
Rectangle
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)
Square
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)
Get Mouse Position
Gets the mouse position.
const mousePosition = canvas.getMousePosition()
const x = mousePosition.x
const y = mousePosition.y