Skip to content

🎨 helper functions for drawing onto <canvas> elements

License

Notifications You must be signed in to change notification settings

semibran/canvas-paint

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

13 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

canvas-paint

Helper functions for drawing onto <canvas> elements

install

npm install canvas-paint

usage

const paint = require('canvas-paint')

fill(canvas, color)

Fills the entire canvas with color.

fill(canvas, 'black')

clear(canvas, rect?)

Clears the region on canvas as specified by rect.

clear(canvas, {
  x: canvas.height / 4,
  y: canvas.height / 4,
  width: canvas.width / 2,
  height: canvas.height / 2
})

If rect is not provided, the entire canvas will be cleared.

rect(canvas, options)

rect(canvas, {
  x: 50,
  y: 25,
  width: 100,
  height: 50,
  fill: 'red'
})

circle(canvas, options)

circle(canvas, {
  x: canvas.width / 2,
  y: canvas.height / 2,
  radius: 32,
  stroke: {
    color: 'blue',
    width: 2
  }
})

arc(canvas, options)

arc(canvas, {
  x: canvas.width / 2,
  y: canvas.height / 2,
  radius: 48,
  start: 120,
  end: 60,
  fill: 'yellow'
})

The above code draws the following image:

arc example

Note that start and end are provided in angles instead of radians. Also, the anticlockwise parameter has been omitted. The values for start and end can be switched in order to achieve the same result.

line(canvas, options)

line(canvas, {
  start: { x: 50, y: 25 },
  end: { x: 125, y: 5 },
  stroke: {
    color: 'black',
    width: 2
  }
})

polygon(canvas, options)

Draws a polygon onto canvas.

polygon(canvas, {
  points: [
    { x: 64, y: 16 },
    { x: 112, y: 64 },
    { x: 64, y: 112 },
    { x: 16, y: 64 }
  ],
  fill: 'red'
})

The above code draws the following image:

polygon example

image(canvas, options)

image(canvas, {
  image: sprites.wall,
  x: 32,
  y: 16,
  width: sprites.wall.width * 2,
  height: sprites.wall.height * 2
})

width and height are optional - they will default to image.width and image.height if not provided.

text(canvas, options)

text(canvas, {
  text: 'Hello world',
  x: canvas.width / 2,
  y: canvas.height / 2,
  align: 'center',
  baseline: 'middle',
  font: {
    size: 48,
    family: 'sans-serif'
  },
  stroke: {
    color: 'blue'
  }
})

The above code draws the following image:

text example

Additionally, a couple of minor changes have been made to the API defaults.

  • font.size defaults to 16
  • align defaults to 'left'
  • baseline defaults to 'top'

to do

  • basic drawing methods
  • make fill/stroke blocks reusable
  • line cap, join, dash
  • shadows
  • gradients
  • compositing
  • masking
  • bezier curves
  • transforms (translation, rotation, scaling)

license

MIT © Brandon Semilla

About

🎨 helper functions for drawing onto <canvas> elements

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published