1.0.2 • Published 5 years ago
canvas-scrollmap v1.0.2
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()