fruta 0.0.1

package/DOCUMENTATION.MD

@@ -0,0 +1,874 @@
+### Methods
+
+We created an additional layer on top of Canvas functionalities to enable method nesting and perform actions in a single line, as well as to encapsulate shapes and behaviors in a simpler and more organized way.
+
+Next, I will go through each method to which we have applied this encapsulation approach.
+
+```js
+/**
+  /* SHAPE - METHODS */
+   * @doc https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/fillStyle
+   * @description property of the Canvas 2D API specifies the color, gradient,
+   * or pattern to use inside shapes. The default style is #000 (black
+   *
+   * @param {Color} style - CanvasGradient | CanvasPattern
+   *
+   * @example - "red" | rgb(25,25,25)
+   *
+   * @return ShapeCreator class
+   */
+  fillStyleShape(style) {
+    this.context.fillStyle = style
+    return this
+  }
+
+  /**
+   * @alert
+   * I think we should separe this methods, but I'm no pretty sure
+   *
+   * @param {Array<numbers>} fill - create a rectangle by x, y, width, height
+   * @param {Array<numbers>} stroke  draw a stroke rectangle x, y, width, height
+   * @param {Array<numbers>} clear - erases the pixels in a rectangular area by setting them to transparent black. side by x, y, width, height
+   *
+   * @return ShapeCreator class
+   */
+  drawRectShape(
+    clear = [0, 0, 0, 0],
+    fill = [0, 0, 0, 0],
+    stroke = [0, 0, 0, 0]
+  ) {
+    this.context.clearRect(...clear)
+    this.context.fillRect(...fill)
+    this.context.strokeRect(...stroke)
+
+    return this
+  }
+  /**
+   * @doc https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/roundRect
+   * @description method of the Canvas 2D API adds a rounded rectangle to the current path.
+   *
+   * @param {*} x - x-axis coordinate of the rectangle's starting point, in pixels.
+   * @param {*} y - y-axis coordinate of the rectangle's starting point, in pixels.
+   * @param {*} width - rectangle's width. Positive values are to the right, and negative to the left.
+   * @param {*} height - rectangle's height. Positive values are down, and negative are up.
+   * @param {Array<number>} radius position by index in array Ex. top-left | top-right | bottom-right | bottom-left
+   *
+   * @return ShapeCreator class
+   */
+  roundRectShape(x, y, width, height, radius) {
+    this.context.roundRect(x, y, width, height, radius)
+    return this
+  }
+
+  /**
+   * @doc https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/beginPath
+   * @description method of the Canvas 2D API starts a new path by emptying the list of
+   * sub-paths. Call this method when you want to create a new path.
+   *
+   * @return ShapeCreator class
+   */
+  startShape() {
+    this.context.beginPath()
+    return this
+  }
+
+  /**
+   * @doc https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/stroke
+   * @description  method of the Canvas 2D API strokes (outlines) the current or given
+   * path with the current stroke style
+   *
+   * @param {Path2D} path - A Path2D path to fill.
+   *
+   * @return ShapeCreator class
+   */
+  strokeShape(...path) {
+    this.context.stroke(...path)
+    return this
+  }
+
+  /**
+   * @doc https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/moveTo
+   * @description  method of the Canvas 2D API begins a new sub-path
+   * at the point specified by the given (x, y) coordinates
+   *
+   * @param {number} x - new horizontal draw position
+   * @param {number} y - new vertical draw position
+   *
+   * @return ShapeCreator class
+   */
+  moveTo(x, y) {
+    this.context.moveTo(x, y)
+    return this
+  }
+
+  /**
+   * @doc https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineTo
+   * @description method lineTo(), part of the Canvas 2D API,
+   * adds a straight line to the current sub-path by connecting
+   * the sub-path's last point to the specified (x, y) coordinates
+   *
+   * @param {number} x  horizontal line position
+   * @param {number} y  vertical line position
+   *
+   * @return ShapeCreator class
+   */
+  lineTo(x, y) {
+    this.context.lineTo(x, y)
+    return this
+  }
+
+  /**
+   * @doc https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/fill
+   * @description - method of the Canvas 2D API fills the current or given path with the current
+   *
+   * @param {string} region algorithm by which to determine if a point is inside or outside the filling region. Possible values:
+   * nonzero | evenodd.
+   *
+   * @return ShapeCreator class
+   */
+  fillShape(...param) {
+    this.context.fill(...param)
+    return this
+  }
+
+  /**
+   * @doc https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/arc
+   * @description method of the Canvas 2D API adds a circular arc to the current sub-path.
+   *
+   * @param {number} x - horizontal line position
+   * @param {number} y - vertical line position
+   * @param {number} radius - arc radius
+   * @param {number} startAngle - starting point of the angle.
+   * @param {number} endAngle - ending point of the angle.
+   * @param {boolean} counterclockwise - flip draw angle
+   *
+   * @return ShapeCreator class
+   */
+  arcShape(x, y, radius, startAngle, endAngle, counterclockwise) {
+    this.context.arc(x, y, radius, startAngle, endAngle, counterclockwise)
+    return this
+  }
+
+  /**
+   * @alert
+   * This can we broke in Firefox
+   *
+   * @doc https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/quadraticCurveTo
+   * @description  method of the Canvas 2D API adds a quadratic
+   * Bézier curve to the current sub-path. It requires two points:
+   * the first one is a control point and the second one is the end point.
+   * The starting point is the latest point in the current path,
+   * which can be changed using moveTo() before creating the quadratic
+   * Bézier curve.
+   *
+   * @param {number} cpx - x-axis coordinate of the control point
+   * @param {number} cpy - y-axis coordinate of the control point
+   * @param {number} x - x-axis coordinate of the end point
+   * @param {number} y - y-axis coordinate of the end point
+   *
+   * @return ShapeCreator class
+   */
+  quadraticCurveTo(cpx, cpy, x, y) {
+    this.context.quadraticCurveTo(cpx, cpy, x, y)
+    return this
+  }
+
+  /**
+   * @doc https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/bezierCurveTo
+   * @description method of the Canvas 2D API adds a cubic Bézier
+   * curve to the current sub-path. It requires three points: the
+   * first two are control points and the third one is the end point.
+   * The starting point is the latest point in the current path,
+   * which can be changed using moveTo() before creating the Bézier curve
+   *
+   * @param {*} cp1x - x-axis coordinate of the first control point
+   * @param {*} cp1y - y-axis coordinate of the first control point
+   * @param {*} cp2x - x-axis coordinate of the second control point
+   * @param {*} cp2y - y-axis coordinate of the second control point
+   * @param {*} x - x-axis coordinate of the end point
+   * @param {*} y - y-axis coordinate of the end point
+   *
+   * @return ShapeCreator class
+   */
+  bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y) {
+    this.context.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)
+    return this
+  }
+
+  /**
+   * @doc https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/arcTo
+   * @description  method of the Canvas 2D API adds a circular arc to the current sub-path,
+   * using the given control points and radius. The arc is automatically connected to the
+   * path's latest point with a straight line, if necessary for the specified parameters
+   *
+   * @param {number} x1 x-axis coordinate of the first control point
+   * @param {number} y1 y-axis coordinate of the first control point
+   * @param {number} x2 x-axis coordinate of the second control point
+   * @param {number} y2 y-axis coordinate of the second control point
+   * @param {number} radius arc's radius. Must be non-negative
+   *
+   * @return ShapeCreator class
+   */
+  arcTo(x1, y1, x2, y2, radius) {
+    this.context.arcTo(x1, y1, x2, y2, radius)
+    return this
+  }
+
+  /**
+   * @todo - I think we can improve this - we need to figure out how to
+   *
+   * @description The Path2D() constructor returns a newly instantiated Path2D object,
+   * optionally with another path as an argument (creates a copy), or optionally with
+   * a string consisting of SVG path data.
+   *
+   * @param  {...any} args (new Path2D, domMatrix)
+   *
+   * @return Path2D Class
+   */
+  path2DShape(...args) {
+    return new Path2D(...args)
+  }
+
+  /**
+   * @todo - I think we can improve this - we need to figure out how to
+   *
+   * @doc https://developer.mozilla.org/en-US/docs/Web/API/DOMMatrix
+   * @description The DOMMatrix interface represents 4×4 matrices, suitable for 2D and 3D operations
+   * including rotation and translation. It is a mutable version of the DOMMatrixReadOnly interface.
+   *
+   * @return DOMMatrix Class
+   */
+  domMatrixShape() {
+    return new DOMMatrix()
+  }
+
+  /**
+   * @doc https://developer.mozilla.org/en-US/docs/Web/API/Path2D/addPath
+   * @description  method of the Canvas 2D API adds one Path2D object to another Path2D object.
+   *
+   * @param {*} callerPath  path used to call addPatch
+   * @param  {...any} args  config Path and domMatrix
+   *
+   * @return Path2D class
+   */
+  addPathShape(callerPath, ...args) {
+    return callerPath.addPath(...args)
+  }
+
+  /**
+   * @doc https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/ellipse
+   * @description method of the Canvas 2D API adds an elliptical arc to the current sub-path.
+   *
+   * @param {number} x  horizontal position
+   * @param {number} y  vertical position
+   * @param {number} radiusX  ellipse's major-axis radius. Must be non-negative
+   * @param {number} radiusY  ellipse's minor-axis radius. Must be non-negative
+   * @param {number} rotation  rotation of the ellipse, expressed in radians
+   * @param {number} startAngle  eccentric angle at which the ellipse starts, measured clockwise from
+   * the positive x-axis and expressed in radians
+   * @param {number} endAngle  same ↑
+   * @param {number} counterclockwise An optional boolean value which, if true, draws the ellipse counterclockwise
+   * (anticlockwise). The default value is false (clockwise)
+   *
+   * @example - (100, 100, 50, 75, Math.PI / 4, 0, 2 * Math.PI)
+   *
+   * @return ShapeCreator class
+   */
+  ellipseShape(
+    x,
+    y,
+    radiusX,
+    radiusY,
+    rotation,
+    startAngle,
+    endAngle,
+    counterclockwise
+  ) {
+    this.context.ellipse(
+      x,
+      y,
+      radiusX,
+      radiusY,
+      rotation,
+      startAngle,
+      endAngle,
+      counterclockwise
+    )
+    return this
+  }
+
+  /**
+   * @message You can use addColorStop here
+   *
+   * @doc https://www.w3schools.com/tags/canvas_addcolorstop.asp
+   * @description Define a gradient from black to white and use it to fill a rectangle:
+   *
+   * @param  {...number} rgba red,green,blue,alpha colors
+   *
+   * @example (r,g,b,a) -> (255,255,255,1)
+   *
+   * @return createLinearGradient
+   */
+  createLinearGradient(...rgba) {
+    return this.context.createLinearGradient(...rgba)
+  }
+
+  /**
+   * @message You can use addColorStop here
+   *
+   * @doc https://www.w3schools.com/tags/canvas_createradialgradient.asp
+   * @description Define a radial gradient
+   *
+   * @param  {...number} position
+   *
+   * @example (x0, y0, r0, x1, y1, r1a) -> (75, 50, 5, 90, 60, 100)
+   *
+   * @return createRadialGradient
+   */
+  createRadialGradient(...position) {
+    return this.context.createRadialGradient(...position)
+  }
+
+  /**
+   * @doc https://www.w3schools.com/tags/canvas_addcolorstop.asp
+   * @description Define a gradient from black to white and use it to fill a rectangle:
+   *
+   * @param {createLinearGradient} gradient
+   * @param {Array<{color: string<color>}} stops
+   *
+   * @example (gradient, {color:"red"})
+   *
+   * @return ShapeCreator Class
+   */
+  addColorStop(gradient, stops) {
+    for (let i = 0; i < stops.length; i++) {
+      const element = stops[i]
+      gradient.addColorStop(i, element.color)
+    }
+    return this
+  }
+
+  /**
+   * @doc  https://www.w3schools.com/tags/canvas_createpattern.asp
+   * @description create a patter by an image
+   *
+   * @param {Image} img new Image() class
+   * @param {*} repeatType type of repetition
+   *
+   * @example (new Image(), repeat | repeat-x | repeat-y | no-repeat)
+   *
+   * @retunr ShapeCreator Class
+   */
+  createPattern(img, repeatType = 'repeat') {
+    this.context.createPattern(img, repeatType)
+    return this
+  }
+
+  /**
+   * @doc https://www.w3schools.com/tags/canvas_linecap.asp
+   * @description Draw a line with rounded end caps
+   *
+   * @param {string} style line style
+   *
+   * @example butt|round|square
+   *
+   * @return ShapeCreator Class
+   */
+  lineCapShape(style) {
+    this.context.lineCap = style
+    return this
+  }
+
+  /**
+   * @doc https://www.w3schools.com/tags/canvas_linejoin.asp
+   * @description Create a rounded corner where the two lines meet
+   *
+   * @param {string} style line style
+   *
+   * @example bevel|round|miter
+   *
+   * @return ShapeCreator Class
+   */
+  lineJoinShape(style) {
+    this.context.lineJoin = style
+    return this
+  }
+  /**
+   * @doc https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineWidth
+   * @description property of the Canvas 2D API sets the thickness of lines
+   *
+   * @param {number} width - define the thickness of lines
+   *
+   * @retun ShapeCreator class
+   */
+  lineWidthShape(width) {
+    this.context.lineWidth = width
+    return this
+  }
+
+  /**
+   * @doc https://www.w3schools.com/tags/canvas_miterlimit.asp
+   * @description Draw lines with the maximum miter length of 5
+   *
+   * @param {number} limit define the limit
+   *
+   * @retun ShapeCreator class
+   */
+  miterLimitShape(limit) {
+    this.context.miterLimit = limit
+    return this
+  }
+
+  /**
+   * @doc https://www.w3schools.com/tags/canvas_shadowblur.asp
+   * @description Draw a red rectangle with a black shadow, with blur level of 20
+   *
+   * @param {number} size define the blur size
+   *
+   * @retun ShapeCreator class
+   */
+  shadowBlurOfShape(size) {
+    this.context.shadowBlur = size
+    return this
+  }
+
+  /**
+   * @doc https://www.w3schools.com/tags/canvas_shadowcolor.asp
+   * @description Draw a red rectangle with a black shadow:
+   *
+   * @param {string} style shadow color
+   *
+   * @return ShapeCreator class
+   */
+  shadowColorOfShape(style) {
+    this.context.shadowColor = style
+    return this
+  }
+
+  shadowOffSetXY(x, y) {
+    this.context.shadowOffsetX = x
+    this.context.shadowOffsetX = y
+    return this
+  }
+
+  /**
+   * @doc https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/strokeStyle
+   * @description property of the Canvas 2D API specifies the color, gradient, or pattern
+   * to use for the strokes (outlines) around shapes. The default is #000 (black)
+   *
+   *  @param {Color | CanvasGradient | CanvasPattern} style - property to specify color,
+   * gradient or pattern
+   *
+   * @return ShapeCreator class
+   */
+  strokeStyle(style) {
+    this.context.strokeStyle = style
+    return this
+  }
+
+  /**
+   * @doc https://www.w3schools.com/tags/canvas_scale.asp
+   * @description change the size of shape
+   *
+   * @param {number} x horizontal scale
+   * @param {number} y vertical scale
+   *
+   * @return ShapeCreator class
+   */
+  scaleShape(x, y) {
+    this.context.scale(x, y)
+    return this
+  }
+
+  /**
+   * @doc https://www.w3schools.com/tags/canvas_rotate.asp
+   * @description Rotate the rectangle
+   *
+   * @param {number} angle the angle to rotate
+   *
+   * @return ShapeCreator class
+   */
+  rotateShape(angle) {
+    this.context.rotate(angle)
+    return this
+  }
+
+  /**
+   * @doc https://www.w3schools.com/tags/canvas_translate.asp
+   * @description change the position of shape
+   *
+   * @param {number} x horizontal trasnform
+   * @param {number} y vertical trasnform
+   *
+   * @return ShapeCreator class
+   */
+  translateShape(x, y) {
+    this.context.translate(x, y)
+    return this
+  }
+
+  /**
+   * @doc https://www.w3schools.com/tags/canvas_transform.asp
+   * @description method scales, rotates, moves, and skews the context
+   *
+   * @param {Array<number[posA, posB, posC, posD, posE, posF]>} pos
+   *
+   * @return ShapeCreator class
+   */
+  transformShape(x, y) {
+    this.context.transform(x, y)
+    return this
+  }
+
+  /**
+   * @doc https://www.w3schools.com/tags/canvas_transform.asp
+   * @description method scales, rotates, moves, and skews the context
+   *
+   * @param {Array<number[posA, posB, posC, posD, posE, posF]>} pos
+   *
+   * @return ShapeCreator Class
+   */
+  setTransformShape(x, y) {
+    this.context.setTransform(x, y)
+    return this
+  }
+
+  /**
+   * @doc https://www.w3schools.com/tags/canvas_globalalpha.asp
+   * @description change the global alpha
+   *
+   * @param {number} alpha change the global alpha
+   *
+   * @return ShapeCreator Class
+   */
+  globalAlpha(alpha) {
+    this.context.globalAlpha(alpha)
+    return this
+  }
+
+  /**
+   * @doc https://www.w3schools.com/tags/canvas_globalcompositeoperation.asp
+   * @description property sets or returns how a source are drawn over a destination.
+   *
+   * @param {string} composition
+   *
+   * @example source-over | source-atop | source-in | source-out | destination-over |
+   * destination-atop | destination-in | destination-out | lighter | copy | xor
+   *
+   * @return globalCompositeOperation() method
+   */
+  globalCompositeOperation(composition) {
+    return (this.context.globalCompositeOperation = composition)
+  }
+
+  /**
+   * @doc https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/clip
+   * @description method of the Canvas 2D API turns the current or given path into the
+   * current clipping region.
+   *
+   * @return clip
+   */
+  clipShape() {
+    return this.context.clip()
+  }
+
+  /* FONT - METHODS */
+
+  /**
+   * @doc https://developer.mozilla.org/en-US/docs/Web/API/FontFace
+   * @description You can load, give a name and styles to the fonts using this method
+   * it is like the main for fonts.
+   *
+   * @param  {...any} config - see the doc for the configs
+   *
+   * @return parent class
+   */
+  loadFont(...config) {
+    new FontFace(...config)
+    return this
+  }
+
+  /**
+   * @message - very important method, you should read the doc below
+   * @doc https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/textRendering
+   * @param {string} config
+   * @example - auto | optimizeSpeed | optimizeLegibility | geometricPrecision
+   *
+   * @return FontCreator class
+   */
+  fontRenderingType(config) {
+    this.context.textRendering = config
+    return this
+  }
+
+  /**
+   * @param {*} message - current text that you want to show
+   * @param {*} xPos  - horizontal position of the text
+   * @param {*} yPos  - vertical position of the text
+   *
+   * @example - ("Hello world", 10, 10)
+   *
+   * @return FontCreator class
+   */
+  fontFill(message, xPos, yPos) {
+    this.context.fillText(message, xPos, yPos)
+    return this
+  }
+
+  /**
+   * @message - you could change the maxWith, we put it in 20 just like a
+   * default value
+   *
+   * @param {string} text - current text that you want to show (only stroke)
+   * @param {number} xPos - horizontal position of the text
+   * @param {number} yPos - vertical position of the text
+   * @param {number} maxWidth - maxWith stroke
+   *
+   * @example - ("Hello",10,10,20)
+   *
+   * @return FontCreator class
+   */
+  fontStrokeText(...config) {
+    this.context.strokeText(...config)
+    return this
+  }
+
+  /**
+   * @param {string} style css value for fonts (you should know a little bit of css)
+   * @example - bold 48px serif
+   * @return FontCreator class
+   */
+  fontStyle(style) {
+    this.context.font = style
+    return this
+  }
+
+  /**
+   * @param {string} style
+   * @example - left | right | center | start | end
+
+  * @return FontCreator class
+   */
+  fontAlign(style) {
+    this.context.textAlign = style
+    return this
+  }
+
+  /**
+   * @doc https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/direction
+   * @description with this method you will be able to change the direction of the
+   * font - Ex: !Hi -> Hi!
+   * @param {string} style
+   * @exameple - ltr | rtl | inherit
+   *
+   * @return FontCreator class
+   */
+  fontDirection(style) {
+    this.context.direction = style
+    return this
+  }
+
+  /**
+   * @doc https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/textBaseline
+   * @description property of the Canvas 2D API specifies the current
+   * text baseline used when drawing text
+   * @param {string} style - top | hanging | middle | alphabetic | ideographic | bottom
+   *
+   * @return FontCreator class
+   */
+  fontBaseline(style) {
+    this.context.textBaseline = style
+    return this
+  }
+
+  /**
+   * @doc https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/fontVariantCaps
+   * @param {string} style - normal | small-caps | all-small-caps | petite-caps | all-petite-caps
+   * | unicase | titling-caps
+   *
+   * @return FontCreator class
+   */
+  fontVariantCaps(style) {
+    this.context.fontVariantCaps = style
+    return this
+  }
+
+  /**
+   * @doc https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/fontKerning
+   * @param {string} style kerning property to adjust the space between characters
+   * @example - auto | normal | none
+   * @return FontCreator class
+   */
+  fontKerning(style) {
+    this.context.fontKerning = style
+    return this
+  }
+
+  /**
+   * @alert the style prop should be a number by default but it is a string but number
+   * @param {string (number)} style - spacing of between the words
+   * @return FontCreator class
+   */
+  fontWordSpacing(style) {
+    this.context.wordSpacing = style
+    return this
+  }
+
+  /**
+   * @warning - could no be tested
+   * @doc https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/fontStretch
+   * @param {string} style - fontStretch property
+   * @example - ultra-condensed | extra-condensed | condensed | semi-condensed | normal |
+   * semi-expanded | expanded | extra-expanded | ultra-expanded
+   *
+   * @return FontCreator class
+   */
+  fontS(style) {
+    this.context.fontStretch = style
+    return this
+  }
+
+  /* IMAGE - METHODS */
+
+  /**
+   * @param { src: string, img: [sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight] } config
+   * Configuration could be long or short, but right now we are showing as example the long
+   * way. You could try adding just: dx, dy, dWidth, dHeight or dx, dy (for the img property)
+   *
+   * @example - {src: imgPath, img: [sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight]}
+   *
+   * @return ShapeCreator Class
+   */
+  createImage(config) {
+    const img = new Image()
+    img.src = config.src
+    this.context.drawImage(img, ...config.img)
+    return this
+  }
+
+  /**
+   * @doc https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/createImageData
+   * @description method of the Canvas 2D API creates a new, blank ImageData object with the
+   * specified dimensions. All of the pixels in the new object are transparent black
+   *
+   * @param  {object<width | height | settings | ImageData>} imgConfig
+   *
+   * @example width | height | settings -> object{colorSpace} or existing ImageData
+   *
+   * @return createImageData method
+   */
+  createImageData(...imgConfig) {
+    return this.context.createImageData(...imgConfig)
+  }
+
+  /**
+   * @doc https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/getImageData
+   * @description method getImageData() of the Canvas 2D API returns an ImageData object
+   * representing the underlying pixel data for a specified portion of the canvas.
+   *
+   * @param  {object<sx | xy | sw | sh | setting>} imgConfig
+   *
+   * @example sx | sy | sw | sh or settings -> object<colorSpace>
+   *
+   * @return ShapeCreator Class
+   */
+  getImgData(...imgConfig) {
+    return this.context.getImageData(...imgConfig)
+  }
+
+  /**
+   * @doc https://www.w3schools.com/tags/canvas_putimagedata.asp
+   * @description  method puts the image data (from a specified ImageData object) back onto the canvas
+   *
+   * @param {object<imgData> } imgData The ImageData object to put on the context.
+   * @param  {...} pos xPos and yPos
+   *
+   * @example {imgData, x, y, dirtyX, dirtyY, dirtyWidth, dirtyHeight}
+   * @return ShapeCreator Class
+   */
+  putImageData(imgData, ...pos) {
+    this.context.putImageData(imgData, ...pos)
+    return this
+  }
+```
+
+# Examples
+
+Now we will show you some examples we made with the library. Remember that everything you can do with canvas, you will be able to do with Fruta. Also, remember that we are still in development and in the early stages. We want to do many things, but it will take time. Nevertheless, feel free to give your opinion in order to improve what we currently have.
+
+### Init Config
+
+```js
+const config = {
+  scene: {
+    w: 500,
+    h: 500,
+    id: 'main',
+  },
+}
+
+const { FontCreator, ShapeCreator, Game } = Fruta(config)
+
+const canvasW = ShapeCreator.canvas.width
+const canvasH = ShapeCreator.canvas.height
+```
+
+## Ping Pong
+
+```js
+let x = 50
+let y = 50
+
+let dx = 7
+let dy = 5
+
+Game.tick.OnRender((tick) => {
+  x += dx
+  y += dy
+
+  ShapeCreator.drawRectShape(
+    [0, 0, canvasW, canvasH],
+    [x, y, 50, 50],
+    [0, 0, canvasW, canvasH]
+  ).fillStyleShape('blue')
+
+  if (x + 50 >= canvasW || x <= 0) {
+    dx = -dx
+  }
+  if (y + 50 >= canvasH || y <= 0) {
+    dy = -dy
+  }
+})
+```
+
+https://github.com/karttofer/Fruta/assets/34972636/165c74fa-424b-4c4e-8ec8-45514d7274bc
+
+## Simple Font Generation With Animation
+
+```js
+const drawMap = [
+  [0, 0, 0],
+  [0, 0, 0],
+  [0, 0, 0],
+]
+const yOffset = 100
+const rotation = 0.01
+
+ShapeCreator.shadowColorOfShape('blue')
+  .shadowOffSetXY(50, 10)
+  .translateShape(250, 250)
+
+Game.tick.OnRender((tick) => {
+  ShapeCreator.drawRectShape([0, 0, canvasW, canvasH]).rotateShape(rotation)
+
+  for (let i = 0; i < drawMap.length; i++) {
+    for (let j = 0; j < drawMap[i].length; j++) {
+      const x = j * 50 // Adjust the horizontal spacing between characters
+      const y = i * 50 + yOffset // Adjust the vertical spacing between lines of text
+      FontCreator.fontStyle('bold 20px serif').fontFill('Hello', x, y)
+    }
+  }
+})
+```
+
+https://github.com/karttofer/Fruta/assets/34972636/5ac156d2-9e08-44de-8308-dacd30657c25