1.0.2 • Published 5 years ago

canvas-scrollmap v1.0.2

Weekly downloads
1
License
ISC
Repository
-
Last release
5 years ago

A canvas scrollmap, eg:

const createApp = require('canvas-scrollmap')

const app = createApp({
  canvas: document.getElementById('app'),
  width: window.innerWidth * 2,
  height: window.innerHeight * 2
})

window.onresize = () => {
  app.canvas.width = window.innerWidth
  app.canvas.height = window.innerHeight
  app.width = app.canvas.width * 2
  app.height = app.canvas.height * 2

  const ctx = app.getContext()
  ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height)
  
  //Do anything you like here
  ctx.fillStyle = '#000'
  ctx.font = '20px sans-serif'
  ctx.textBaseline = 'top'
  ctx.fillText('Hello World', 0, 0)
  ctx.textBaseline = 'middle'
  ctx.textAlign = 'center'
  ctx.fillText('Middle world', app.width / 2, app.height / 2)
  ctx.textBaseline = 'bottom'
  ctx.textAlign = 'left'
  const textLength = ctx.measureText('Bye World').width
  ctx.fillText('Bye World', ctx.canvas.width - textLength, ctx.canvas.height)
  ctx.fillStyle = 'rgba(0,255,0,.5)'
  ctx.fillRect(0, 0, app.width, app.height)
  ctx.moveTo(0, 0)
  ctx.lineTo(1200, 1200)
  ctx.stroke()


  //must call at the end to update the screen
  app.update()
}
window.onresize()
1.0.2

5 years ago

1.0.1

5 years ago

1.0.0

5 years ago