canvas-poo 1.0.2 → 1.0.3

package/canvasPOO.js

@@ -1,8 +1,12 @@
+/**
+  canvasPOO.js
+ hecho por spacesxd
+ */
 
-/* --- canvasPOO ---
-hola soy spacesxd el creador de esta wea,
-si no sabes cómo usarlo puedes buscar en mi canal de Youtube o También en la documentación:) */
 function canvasPOO(ctx) {
+
+  // formas
+
   ctx.circle = (x, y, r) => {
     ctx.beginPath(); ctx.arc(x, y, r, 0, Math.PI * 2); ctx.fill()
   }
@@ -33,8 +37,13 @@ function canvasPOO(ctx) {
     ctx.closePath(); ctx.fill()
   }
 
+  // ── Helpers ──────────────────────────────────────────────
+
   ctx.background = (color) => {
-    ctx.fillStyle = color; ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height)
+    ctx.save()
+    ctx.fillStyle = color
+    ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height)
+    ctx.restore()
   }
 
   ctx.clear = () => ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height)
@@ -59,121 +68,82 @@ function canvasPOO(ctx) {
     stops.forEach(([t, c]) => g.addColorStop(t, c)); return g
   }
 
-  // objetos :D(POO para los "genios")
-  ctx.Rect = (x, y, w, h, color = '#fff') => ({
-    position: { x, y },
-    size:     { w, h },
-    scale:    { x: 1, y: 1 },
-    rotation: 0,
-    alpha:    1,
-    visible:  true,
-    color,
-    update: null,
-    draw() {
-      if (!this.visible) return
-      ctx.save()
-      ctx.globalAlpha = this.alpha
-      ctx.translate(this.position.x + this.size.w / 2, this.position.y + this.size.h / 2)
-      ctx.rotate(this.rotation)
-      ctx.scale(this.scale.x, this.scale.y)
-      ctx.fillStyle = this.color
-      ctx.fillRect(-this.size.w / 2, -this.size.h / 2, this.size.w, this.size.h)
-      ctx.restore()
-    }
-  })
+  //ciclos infinitos xd
 
-  ctx.Circle = (x, y, r, color = '#fff') => ({
-    position: { x, y },
-    radius:   r,
-    scale:    { x: 1, y: 1 },
-    alpha:    1,
-    visible:  true,
-    color,
-    update: null,
-    draw() {
-      if (!this.visible) return
-      ctx.save()
-      ctx.globalAlpha = this.alpha
-      ctx.translate(this.position.x, this.position.y)
-      ctx.scale(this.scale.x, this.scale.y)
-      ctx.fillStyle = this.color
-      ctx.circle(0, 0, this.radius)
-      ctx.restore()
+  ctx.loop = (fn) => {
+    let last = 0, time = 0, _raf
+    const tick = (now) => {
+      const dt = Math.min((now - last) / 1000, 0.05)
+      last = now; time += dt
+      fn(dt, time)
+      _raf = requestAnimationFrame(tick)
     }
-  })
+    _raf = requestAnimationFrame((now) => { last = now; tick(now) })
+    return () => cancelAnimationFrame(_raf)
+  }
 
-  ctx.Polygon = (points, color = '#fff') => ({
-    position: { x: 0, y: 0 },
-    scale:    { x: 1, y: 1 },
-    rotation: 0,
-    alpha:    1,
-    visible:  true,
-    color,
-    points,
-    update: null,
-    draw() {
-      if (!this.visible) return
-      ctx.save()
-      ctx.globalAlpha = this.alpha
-      ctx.translate(this.position.x, this.position.y)
-      ctx.rotate(this.rotation)
-      ctx.scale(this.scale.x, this.scale.y)
-      ctx.fillStyle = this.color
-      ctx.polygon(this.points)
-      ctx.restore()
-    }
-  })
+  // objetos 😼
 
-  ctx.Sprite = (x, y, w, h, img) => ({
-    position: { x, y },
-    size:     { w, h },
-    scale:    { x: 1, y: 1 },
-    rotation: 0,
-    alpha:    1,
-    visible:  true,
-    img,
-    update: null,
+  const makeObj = (drawFn, props) => ({
+    ...props,
+    visible: true,
+    alpha: 1,
     draw() {
-      if (!this.visible || !this.img) return
+      if (!this.visible) return
       ctx.save()
       ctx.globalAlpha = this.alpha
-      ctx.translate(this.position.x + this.size.w / 2, this.position.y + this.size.h / 2)
-      ctx.rotate(this.rotation)
-      ctx.scale(this.scale.x, this.scale.y)
-      ctx.drawImage(this.img, -this.size.w / 2, -this.size.h / 2, this.size.w, this.size.h)
+      drawFn(this)
       ctx.restore()
     }
   })
 
-  ctx.Text = (x, y, text, opts = {}) => ({
-    position: { x, y },
-    scale:    { x: 1, y: 1 },
-    text,
-    size:     opts.size     ?? 16,
-    family:   opts.family   ?? 'sans-serif',
-    color:    opts.color    ?? '#fff',
-    align:    opts.align    ?? 'left',
-    baseline: opts.baseline ?? 'top',
-    bold:     opts.bold     ?? false,
-    alpha:    1,
-    visible:  true,
-    update: null,
-    draw() {
-      if (!this.visible) return
-      ctx.save()
-      ctx.globalAlpha = this.alpha
-      ctx.translate(this.position.x, this.position.y)
-      ctx.scale(this.scale.x, this.scale.y)
-      ctx.print(this.text, 0, 0, {
-        size: this.size, family: this.family, color: this.color,
-        align: this.align, baseline: this.baseline, bold: this.bold
-      })
-      ctx.restore()
-    }
+  ctx.Rect = (x, y, w, h, color = '#fff') => makeObj(o => {
+    ctx.translate(o.position.x + o.size.w / 2, o.position.y + o.size.h / 2)
+    ctx.rotate(o.rotation)
+    ctx.scale(o.scale.x, o.scale.y)
+    ctx.fillStyle = o.color
+    ctx.fillRect(-o.size.w / 2, -o.size.h / 2, o.size.w, o.size.h)
+  }, { position:{x,y}, size:{w,h}, scale:{x:1,y:1}, rotation:0, color })
+
+  ctx.Circle = (x, y, r, color = '#fff') => makeObj(o => {
+    ctx.translate(o.position.x, o.position.y)
+    ctx.scale(o.scale.x, o.scale.y)
+    ctx.fillStyle = o.color
+    ctx.circle(0, 0, o.radius)
+  }, { position:{x,y}, radius:r, scale:{x:1,y:1}, color })
+
+  ctx.Polygon = (points, color = '#fff') => makeObj(o => {
+    ctx.translate(o.position.x, o.position.y)
+    ctx.rotate(o.rotation)
+    ctx.scale(o.scale.x, o.scale.y)
+    ctx.fillStyle = o.color
+    ctx.polygon(o.points)
+  }, { position:{x:0,y:0}, points, scale:{x:1,y:1}, rotation:0, color })
+
+  ctx.Sprite = (x, y, w, h, img) => makeObj(o => {
+    if (!o.img) return
+    ctx.translate(o.position.x + o.size.w / 2, o.position.y + o.size.h / 2)
+    ctx.rotate(o.rotation)
+    ctx.scale(o.scale.x, o.scale.y)
+    ctx.drawImage(o.img, -o.size.w / 2, -o.size.h / 2, o.size.w, o.size.h)
+  }, { position:{x,y}, size:{w,h}, scale:{x:1,y:1}, rotation:0, img })
+
+  ctx.Text = (x, y, text, opts = {}) => makeObj(o => {
+    ctx.translate(o.position.x, o.position.y)
+    ctx.scale(o.scale.x, o.scale.y)
+    ctx.print(o.text, 0, 0, {
+      size: o.size, family: o.family, color: o.color,
+      align: o.align, baseline: o.baseline, bold: o.bold
+    })
+  }, {
+    position:{x,y}, scale:{x:1,y:1}, text,
+    size: opts.size ?? 16, family: opts.family ?? 'sans-serif',
+    color: opts.color ?? '#fff', align: opts.align ?? 'left',
+    baseline: opts.baseline ?? 'top', bold: opts.bold ?? false
   })
 
   return ctx
 }
 
 if (typeof module !== 'undefined') module.exports = canvasPOO
-else window.canvasPlus = canvasPOO
+else window.canvasPOO = canvasPOO

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "canvas-poo",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "a javascript library that improves the canvas :D",
   "keywords": [
     "canvas",