Lightweight framework to draw on canvas.
Compile the file locally running npm run build
and refference ./dist/draw.js
file.
Another option is to reference the CDN file directly: <script src="https://cdn.jsdelivr.net/npm/draw.js/dist/draw.js"></script>
// Setup function is optional and it will run before load event is fired
setup() {
frameRate(10) // Optional (default 60)
createCanvas(400, 400) // Optional (default 600x600)
noCanvas() // Optional
}
// Draw function will be intercepted and run in loop over the specified frame rate
draw() {
console.log('run')
}
background(r, g, b, a)
fill(r, g, b, a)
rect(x, y, w, h)
circle(x, y, w, h, detailX)
point(x, y)
distance(x1, y1, z1, x2, y2, z2)
constrain(n, low, high)
let vector = createVector(x, y, z)
vector.copy()
vector.add(x, y, z)
vector.subtract(x, y, z)
vector.multiply(n)
vector.divide(n)
vector.limit(maxs)
vector.distance()
vector.magnitude()
random(min, max)
keySpace() { console.log('Space bar pressed') }
keyLeft() { console.log('Left key pressed') }
keyUp() { console.log('Up key pressed') }
keyRight() { console.log('Right key pressed') }
keyDown() { console.log('Down key pressed') }
onMousedown() { console.log('Mouse click') }