minor fixes

Author: luizbills

bun.lock

@@ -1,6 +1,6 @@
 {
     "name": "litecanvas",
-    "version": "0.102.2",
+    "version": "0.102.3",
     "description": "Lightweight HTML5 canvas 2D game engine suitable for small projects and creative coding. Inspired by PICO-8 and p5.js/Processing.",
     "license": "MIT",
     "author": "Luiz Bills <luizbills@pm.me>",
@@ -31,11 +31,11 @@
         "creative coding"
     ],
     "devDependencies": {
-        "@happy-dom/global-registrator": "^20.4.0",
+        "@happy-dom/global-registrator": "^20.7.0",
         "@size-limit/preset-small-lib": "^12.0.0",
-        "@swc/core": "^1.15.11",
+        "@swc/core": "^1.15.13",
         "ava": "^6.4.1",
-        "esbuild": "^0.27.2",
+        "esbuild": "^0.27.3",
         "genversion": "^3.2.0",
         "gzip-size": "^7.0.0",
         "prettier": "^3.8.1",

package.json

@@ -8,7 +8,7 @@ function init() {
         x: 0,
         y: H / 2,
         size: 64,
-        color: 4,
+        color: 3,
     }
     finishLineX = W * 0.7
     victory = false
@@ -21,7 +21,7 @@ function init() {
         if (x > finishLineX) {
             victory = true
             time = T
-            player.color = 5
+            player.color = 2
             // run until collision happens
             unlistenThisEvent()
         }

samples/custom-event/custom-event.js

@@ -10,7 +10,7 @@ function init() {
 
 function update() {
     if (iskeypressed('space')) {
-        color = randi(0, 11)
+        color = randi(0, 3)
     }
     if (iskeydown('ArrowLeft')) {
         x -= 5
@@ -30,5 +30,5 @@ function draw() {
     cls(color)
     text(0, 0, 'Press arrow keys to move', color + 2)
     text(0, 32, 'Hit spacebar to change the colors', color + 2)
-    circfill(x, y, 64, color + 4)
+    circfill(x, y, 64, color + 1)
 }

samples/keyboard/keyboard.js

@@ -1,12 +1,20 @@
 litecanvas()
 
 function init() {
-    size = W / 6
+    size = W / 12
     angle = 0
     gap = 40
     lineDashPattern = [30, 15]
     lineDashOffset = 0
-    lineWidth = 2
+    lineWidth = 3
+    types = [
+        () => rectfill(0, 0, size, size, 2),
+        () => rect(0, 0, size, size, 1),
+        () => circfill(0, 0, size / 2, 3),
+        () => circ(0, 0, size / 2, 1),
+        () => ovalfill(0, 0, size * 1.5, size / 2, 2),
+        () => oval(0, 0, size * 1.5, size / 2, 1),
+    ]
 }
 
 function update(dt) {
@@ -19,16 +27,14 @@ function draw() {
     cls(0)
     linewidth(11 - wave(-10, 10, T * 10))
 
-    rectfill(gap, H / 2 - size / 2, size, size, 2)
+    for (let i = 0; i < 100; i++) {
+        push()
+        const x = rand() * W
+        const y = rand() * H * 0.9
+        translate(x, y)
+        types[randi(0, types.length - 1)]()
+        pop()
+    }
 
-    // rotate the second rect only
-    push()
-    translate(gap * 2 + size + 10 + size / 2, H / 2 - size / 2 + size / 2)
-    rotate(angle)
-    linedash(lineDashPattern, -lineDashOffset)
-    rect(-size / 2, -size / 2, size, size, 1)
-    pop()
-
-    circfill(size * 3, H / 2, size / 2, 2)
-    circ(gap + size * 4, H / 2, size / 2, 1)
+    pause()
 }

samples/shapes/shapes.js

@@ -94,7 +94,7 @@ function draw() {
         rectfill(pos[0] * tileSize, pos[1] * tileSize, tileSize - 1, tileSize - 1, i > 0 ? 2 : 3)
     }
 
-    rectfill(food[0] * tileSize, food[1] * tileSize, tileSize - 1, tileSize - 1, 4)
+    rectfill(food[0] * tileSize, food[1] * tileSize, tileSize - 1, tileSize - 1, 1)
 
     textfont('sans-serif')
     textalign('right', 'hanging')

samples/snake/snake.js

@@ -53,7 +53,7 @@ export default function litecanvas(settings = {}) {
         /** @type {HTMLCanvasElement} _canvas */
         _canvas,
         /** @type {number} */
-        _scale = 1,
+        _canvasScale = 1,
         /** @type {CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D} */
         _ctx,
         /** @type {number} */
@@ -145,7 +145,7 @@ export default function litecanvas(settings = {}) {
             DEV: assert(isNumber(end), '[litecanvas] lerp() 2nd param must be a number')
             DEV: assert(isNumber(t), '[litecanvas] lerp() 3rd param must be a number')
 
-            return t * (end - start) + start
+            return start + t * (end - start)
         },
 
         /**
@@ -187,6 +187,7 @@ export default function litecanvas(settings = {}) {
                 isNumber(precision) && precision >= 0,
                 '[litecanvas] round() 2nd param must be a positive number or zero'
             )
+
             if (!precision) {
                 return math.round(n)
             }
@@ -341,7 +342,7 @@ export default function litecanvas(settings = {}) {
             DEV: assert(isNumber(min), '[litecanvas] randi() 1st param must be a number')
             DEV: assert(isNumber(max), '[litecanvas] randi() 2nd param must be a number')
             DEV: assert(
-                max > min,
+                min <= max,
                 '[litecanvas] randi() the 1st param must be less than the 2nd param'
             )
 
@@ -360,6 +361,7 @@ export default function litecanvas(settings = {}) {
                 isNumber(value) && value >= 0,
                 '[litecanvas] rseed() 1st param must be a positive integer or zero'
             )
+
             _rngSeed = ~~value
         },
 
@@ -1084,7 +1086,7 @@ export default function litecanvas(settings = {}) {
             _eventListeners[eventName].add(callback)
 
             // return a function to remove this event listener
-            return () => _eventListeners && _eventListeners[eventName].delete(callback)
+            return () => _eventListeners[eventName]?.delete(callback)
         },
 
         /**
@@ -1229,7 +1231,7 @@ export default function litecanvas(settings = {}) {
                 // 2
                 _fpsInterval / 1000,
                 // 3
-                _scale,
+                _canvasScale,
                 // 4
                 _eventListeners,
                 // 5
@@ -1345,8 +1347,8 @@ export default function litecanvas(settings = {}) {
                      * @param {MouseEvent | Touch} ev
                      */
                     (ev) => [
-                        (ev.pageX - _canvas.offsetLeft) / _scale,
-                        (ev.pageY - _canvas.offsetTop) / _scale,
+                        (ev.pageX - _canvas.offsetLeft) / _canvasScale,
+                        (ev.pageY - _canvas.offsetTop) / _canvasScale,
                     ],
                 _taps = new Map(),
                 _registerTap =
@@ -1595,8 +1597,8 @@ export default function litecanvas(settings = {}) {
 
         // start the engine
         _initialized = true
-        instance.emit('init', instance)
         instance.resume()
+        instance.emit('init', instance)
     }
 
     function drawFrame() {
@@ -1695,11 +1697,11 @@ export default function litecanvas(settings = {}) {
                 _canvas.style.margin = 'auto'
             }
 
-            _scale = math.min(innerWidth / width, innerHeight / height)
-            _scale = maxScale > 1 && _scale > maxScale ? maxScale : _scale
+            _canvasScale = math.min(innerWidth / width, innerHeight / height)
+            _canvasScale = maxScale > 1 && _canvasScale > maxScale ? maxScale : _canvasScale
 
-            _canvas.style.width = width * _scale + 'px'
-            _canvas.style.height = height * _scale + 'px'
+            _canvas.style.width = width * _canvasScale + 'px'
+            _canvas.style.height = height * _canvasScale + 'px'
         }
 
         // set canvas image rendering properties
@@ -1710,7 +1712,7 @@ export default function litecanvas(settings = {}) {
 
         // trigger "resized" event
         // note: not triggered before the "init" event
-        instance.emit('resized', _scale)
+        instance.emit('resized', _canvasScale)
     }
 
     /**

src/index.js

@@ -0,0 +1,40 @@
+import test from 'ava'
+import litecanvas from '../../src/index.js'
+import * as sinon from 'sinon'
+
+test.before(() => {
+    sinon.stub(console) // silent console
+})
+
+test('autoscale on', async (t) => {
+    const local = litecanvas({
+        width: innerWidth / 2,
+        height: innerHeight / 2,
+        autoscale: true,
+        global: false,
+    })
+
+    await onLitecanvas(local, 'init', () => {
+        t.is(+local.canvas().style.width.replace('px', ''), innerWidth)
+        t.is(local.W, innerWidth / 2)
+        local.pause()
+    })
+
+    local.quit()
+})
+
+test('autoscale off', async (t) => {
+    const local = litecanvas({
+        width: innerWidth / 2,
+        height: innerHeight / 2,
+        autoscale: false,
+        global: false,
+    })
+
+    await onLitecanvas(local, 'init', () => {
+        t.not(+local.canvas().style.width.replace('px', ''), innerWidth)
+        t.is(local.W, innerWidth / 2)
+        local.pause()
+    })
+    local.quit()
+})