canvas-poo 1.0.0

package/canvasPlus.js

@@ -0,0 +1,179 @@
+
+/* --- 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) {
+  ctx.circle = (x, y, r) => {
+    ctx.beginPath(); ctx.arc(x, y, r, 0, Math.PI * 2); ctx.fill()
+  }
+
+  ctx.strokeCircle = (x, y, r) => {
+    ctx.beginPath(); ctx.arc(x, y, r, 0, Math.PI * 2); ctx.stroke()
+  }
+
+  ctx.roundRect = (x, y, w, h, r = 8) => {
+    ctx.beginPath()
+    ctx.moveTo(x + r, y)
+    ctx.lineTo(x + w - r, y)
+    ctx.arcTo(x + w, y,     x + w, y + h, r)
+    ctx.arcTo(x + w, y + h, x,     y + h, r)
+    ctx.arcTo(x,     y + h, x,     y,     r)
+    ctx.arcTo(x,     y,     x + w, y,     r)
+    ctx.closePath(); ctx.fill()
+  }
+
+  ctx.line = (x1, y1, x2, y2) => {
+    ctx.beginPath(); ctx.moveTo(x1, y1); ctx.lineTo(x2, y2); ctx.stroke()
+  }
+
+  ctx.polygon = (points) => {
+    if (!points.length) return
+    ctx.beginPath(); ctx.moveTo(points[0][0], points[0][1])
+    for (let i = 1; i < points.length; i++) ctx.lineTo(points[i][0], points[i][1])
+    ctx.closePath(); ctx.fill()
+  }
+
+  ctx.background = (color) => {
+    ctx.fillStyle = color; ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height)
+  }
+
+  ctx.clear = () => ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height)
+
+  ctx.print = (text, x, y, { size=16, family='sans-serif', color='#fff', align='left', baseline='top', bold=false } = {}) => {
+    ctx.save()
+    ctx.font = `${bold ? 'bold ' : ''}${size}px ${family}`
+    ctx.fillStyle = color; ctx.textAlign = align; ctx.textBaseline = baseline
+    ctx.fillText(text, x, y)
+    ctx.restore()
+  }
+
+  ctx.withAlpha = (a, fn) => { ctx.save(); ctx.globalAlpha = a; fn(); ctx.restore() }
+
+  ctx.linearGradient = (x1, y1, x2, y2, stops) => {
+    const g = ctx.createLinearGradient(x1, y1, x2, y2)
+    stops.forEach(([t, c]) => g.addColorStop(t, c)); return g
+  }
+
+  ctx.radialGradient = (x, y, r1, r2, stops) => {
+    const g = ctx.createRadialGradient(x, y, r1, x, y, r2)
+    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()
+    }
+  })
+
+  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.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()
+    }
+  })
+
+  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,
+    draw() {
+      if (!this.visible || !this.img) 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)
+      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()
+    }
+  })
+
+  return ctx
+}
+
+if (typeof module !== 'undefined') module.exports = canvasPOO
+else window.canvasPlus = canvasPOO

package/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "canvas-poo",
+  "version": "1.0.0",
+  "description": "a javascript library that improves the canvas :D",
+  "keywords": [
+    "canvas",
+    "graphics",
+    "poo",
+    "library"
+  ],
+  "license": "ISC",
+  "author": "spacesxd",
+  "type": "commonjs",
+  "main": "canvasPOO.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  }
+}