melonjs
    Preparing search index...

    Class CanvasRenderer

    a canvas renderer object

    Hierarchy (View Summary)

    Index

    Constructors

    constructor

    Properties

    backgroundColor cache currentColor currentTint depthTest designRatio isContextValid path2D projectionMatrix renderTarget scaleRatio settings type uvOffset

    Accessors

    height lineJoin lineWidth width

    Methods

    beginPath clear clearColor clearMask clearRect clearTint clipRect closePath createPattern drawImage drawPattern fill fillArc fillEllipse fillLine fillPoint fillPolygon fillRect fillRoundRect flush getBlendMode getCanvas getColor getContext getGlobalAlpha globalAlpha lineTo moveTo overlaps rect reset resetTransform resize restore rotate roundRect save scale setAntiAlias setBlendMode setColor setGlobalAlpha setMask setProjection setTint setTransform stroke strokeArc strokeEllipse strokeLine strokePoint strokePolygon strokeRect strokeRoundRect tint toBlob toDataURL toImageBitmap transform translate

    Constructors

    Properties

    backgroundColor: Color

    The background color used to clear the main framebuffer. Note: alpha value will be set based on the transparent property of the renderer settings.

    black
    cache: TextureCache
    currentColor: Color
    currentTint: Color
    depthTest: string

    the default method to sort object ("sorting", "z-buffer")

    "sorting"
    designRatio: number

    the requested video size ratio

    isContextValid: boolean

    true if the current rendering context is valid

    true
    path2D: Path2D

    The Path2D instance used by the renderer to draw primitives

    projectionMatrix: Matrix3d
    renderTarget: CanvasRenderTarget

    The renderer renderTarget

    renderTarget

    scaleRatio: Vector2d

    the scaling ratio to be applied to the main canvas

    <1,1>
    settings: object

    The given constructor options

    type: string

    The renderer type : Canvas, WebGL, etc... (override this property with a specific value when implementing a custom renderer)

    uvOffset: number

    Accessors

    Methods

    • starts a new path by emptying the list of sub-paths. Call this method when you want to create a new path

      Returns void

      // First path
      renderer.beginPath();
      renderer.setColor("blue");
      renderer.moveTo(20, 20);
      renderer.lineTo(200, 20);
      renderer.stroke();
      // Second path
      renderer.beginPath();
      renderer.setColor("green");
      renderer.moveTo(20, 20);
      renderer.lineTo(120, 120);
      renderer.stroke();

    • Clears the main framebuffer with the given color

      Parameters

      • Optionalcolor: string | Color = "#000000"

        CSS color.

      • Optionalopaque: boolean = false

        Allow transparency [default] or clear the surface completely [true]

      Returns void

    • Erase the pixels in the given rectangular area by setting them to transparent black (rgba(0,0,0,0)).

      Parameters

      • x: number

        x axis of the coordinate for the rectangle starting point.

      • y: number

        y axis of the coordinate for the rectangle starting point.

      • width: number

        The rectangle's width.

      • height: number

        The rectangle's height.

      Returns void

    • clip the given region from the original canvas. Once a region is clipped, all future drawing will be limited to the clipped region. You can however save the current region using the save(), and restore it (with the restore() method) any time in the future. (this is an experimental feature !)

      Parameters

      • x: number
      • y: number
      • width: number
      • height: number

      Returns void

    • Draw an image onto the main using the canvas api

      Parameters

      • image:
            | VideoFrame
            | OffscreenCanvas
            | ImageBitmap
            | HTMLCanvasElement
            | HTMLImageElement
            | SVGImageElement
            | HTMLVideoElement

        An element to draw into the context.

      • sx: number

        The X coordinate of the top left corner of the sub-rectangle of the source image to draw into the destination context.

      • sy: number

        The Y coordinate of the top left corner of the sub-rectangle of the source image to draw into the destination context.

      • sw: number

        The width of the sub-rectangle of the source image to draw into the destination context. If not specified, the entire rectangle from the coordinates specified by sx and sy to the bottom-right corner of the image is used.

      • sh: number

        The height of the sub-rectangle of the source image to draw into the destination context.

      • dx: number

        The X coordinate in the destination canvas at which to place the top-left corner of the source image.

      • dy: number

        The Y coordinate in the destination canvas at which to place the top-left corner of the source image.

      • dw: number

        The width to draw the image in the destination canvas. This allows scaling of the drawn image. If not specified, the image is not scaled in width when drawn.

      • dh: number

        The height to draw the image in the destination canvas. This allows scaling of the drawn image. If not specified, the image is not scaled in height when drawn.

      Returns void

      // Position the image on the canvas:
      renderer.drawImage(image, dx, dy);
      // Position the image on the canvas, and specify width and height of the image:
      renderer.drawImage(image, dx, dy, dWidth, dHeight);
      // Clip the image and position the clipped part on the canvas:
      renderer.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);

    • Fill an arc at the specified coordinates with given radius, start and end points

      Parameters

      • x: number

        arc center point x-axis

      • y: number

        arc center point y-axis

      • radius: number
      • start: number

        start angle in radians

      • end: number

        end angle in radians

      • OptionalantiClockwise: boolean

        draw arc anti-clockwise

      Returns void

    • Fill an ellipse at the specified coordinates with given radius

      Parameters

      • x: number

        ellipse center point x-axis

      • y: number

        ellipse center point y-axis

      • w: number

        horizontal radius of the ellipse

      • h: number

        vertical radius of the ellipse

      Returns void

    • Fill a line of the given two points

      Parameters

      • startX: number

        the start x coordinate

      • startY: number

        the start y coordinate

      • endX: number

        the end x coordinate

      • endY: number

        the end y coordinate

      Returns void

    • Draw a rounded filled rectangle at the specified coordinates

      Parameters

      • x: number
      • y: number
      • width: number
      • height: number
      • radius: number

      Returns void

    • creates a rectangular path whose starting point is at (x, y) and whose size is specified by width and height.

      Parameters

      • x: number

        The x axis of the coordinate for the rectangle starting point.

      • y: number

        The y axis of the coordinate for the rectangle starting point.

      • width: number

        The rectangle's width.

      • height: number

        The rectangle's height.

      Returns void

    • restores the most recently saved renderer state by popping the top entry in the drawing state stack

      Returns void

      // Save the current state
      renderer.save();

      // apply a transform and draw a rect
      renderer.tranform(matrix);
      renderer.fillRect(10, 10, 100, 100);

      // Restore to the state saved by the most recent call to save()
      renderer.restore();

    • adds a rotation to the transformation matrix.

      Parameters

      • angle: number

        the rotation angle, clockwise in radians

      Returns void

      // Rotated rectangle
      renderer.rotate((45 * Math.PI) / 180);
      renderer.setColor("red");
      renderer.fillRect(10, 10, 100, 100);

      // Reset transformation matrix to the identity matrix
      renderer.setTransform(1, 0, 0, 1, 0, 0);

    • adds a rounded rectangle to the current path.

      Parameters

      • x: number

        The x axis of the coordinate for the rectangle starting point.

      • y: number

        The y axis of the coordinate for the rectangle starting point.

      • width: number

        The rectangle's width.

      • height: number

        The rectangle's height.

      • radii: any

      Returns void

    • saves the entire state of the renderer by pushing the current state onto a stack.

      Returns void

      // Save the current state
      renderer.save();

      // apply a transform and draw a rect
      renderer.tranform(matrix);
      renderer.fillRect(10, 10, 100, 100);

      // Restore to the state saved by the most recent call to save()
      renderer.restore();

    • adds a scaling transformation to the renderer units horizontally and/or vertically

      Parameters

      • x: number

        Scaling factor in the horizontal direction. A negative value flips pixels across the vertical axis. A value of 1 results in no horizontal scaling.

      • y: number

        Scaling factor in the vertical direction. A negative value flips pixels across the horizontal axis. A value of 1 results in no vertical scaling

      Returns void

    • A mask limits rendering elements to the shape and position of the given mask object. If the drawing or rendering area is larger than the mask, only the intersecting part of the renderable will be visible. (Note Mask are not preserved through renderer context save and restore and need so be manually cleared)

      Parameters

      • Optionalmask: Polygon | Rect | Ellipse | Line | RoundRect

        the shape defining the mask to be applied

      • Optionalinvert: boolean = false

        either the given shape should define what is visible (default) or the opposite

      Returns void

      CanvasRenderer#clearMask

    • Reset (overrides) the renderer transformation matrix to the identity one, and then apply the given transformation matrix.

      Parameters

      • a: number | Matrix2d

        a matrix2d to transform by, or a the a component to multiply the current matrix by

      • b: number

        the b component to multiply the current matrix by

      • c: number

        the c component to multiply the current matrix by

      • d: number

        the d component to multiply the current matrix by

      • e: number

        the e component to multiply the current matrix by

      • f: number

        the f component to multiply the current matrix by

      Returns void

    • Stroke an arc at the specified coordinates with given radius, start and end points

      Parameters

      • x: number

        arc center point x-axis

      • y: number

        arc center point y-axis

      • radius: number
      • start: number

        start angle in radians

      • end: number

        end angle in radians

      • OptionalantiClockwise: boolean

        draw arc anti-clockwise

      • Optionalfill: boolean = false

        also fill the shape with the current color if true

      Returns void

    • Stroke an ellipse at the specified coordinates with given radius

      Parameters

      • x: number

        ellipse center point x-axis

      • y: number

        ellipse center point y-axis

      • w: number

        horizontal radius of the ellipse

      • h: number

        vertical radius of the ellipse

      • Optionalfill: boolean = false

        also fill the shape with the current color if true

      Returns void

    • Stroke a line of the given two points

      Parameters

      • startX: number

        the start x coordinate

      • startY: number

        the start y coordinate

      • endX: number

        the end x coordinate

      • endY: number

        the end y coordinate

      Returns void

    • Stroke a rectangle at the specified coordinates

      Parameters

      • x: number
      • y: number
      • width: number
      • height: number
      • Optionalfill: boolean = false

        also fill the shape with the current color if true

      Returns void

    • Stroke a rounded rectangle at the specified coordinates

      Parameters

      • x: number
      • y: number
      • width: number
      • height: number
      • radius: number
      • Optionalfill: boolean = false

        also fill the shape with the current color if true

      Returns void

    • creates a Blob object representing the last rendered frame

      Parameters

      • Optionaltype: string = "image/png"

        A string indicating the image format

      • Optionalquality: number

        A Number between 0 and 1 indicating the image quality to be used when creating images using file formats that support lossy compression (such as image/jpeg or image/webp). A user agent will use its default quality value if this option is not specified, or if the number is outside the allowed range.

      Returns Promise<any>

      A Promise returning a Blob object representing the last rendered frame

      renderer.convertToBlob().then((blob) => console.log(blob));

    • returns a data URL containing a representation of the last frame rendered

      Parameters

      • Optionaltype: string = "image/png"

        A string indicating the image format

      • Optionalquality: number

        A Number between 0 and 1 indicating the image quality to be used when creating images using file formats that support lossy compression (such as image/jpeg or image/webp). A user agent will use its default quality value if this option is not specified, or if the number is outside the allowed range.

      Returns Promise<any>

      A Promise returning a string containing the requested data URL.

      renderer.toDataURL().then((dataURL) => console.log(dataURL));

    • creates an ImageBitmap object of the last frame rendered (not supported by standard Canvas)

      Parameters

      • Optionaltype: string = "image/png"

        A string indicating the image format

      • Optionalquality: number

        A Number between 0 and 1 indicating the image quality to be used when creating images using file formats that support lossy compression (such as image/jpeg or image/webp). A user agent will use its default quality value if this option is not specified, or if the number is outside the allowed range.

      Returns Promise<any>

      A Promise returning an ImageBitmap.

      renderer.transferToImageBitmap().then((image) => console.log(image));

    • Multiply given matrix into the renderer tranformation matrix

      Parameters

      • a: number | Matrix2d

        a matrix2d to transform by, or a the a component to multiply the current matrix by

      • b: number

        the b component to multiply the current matrix by

      • c: number

        the c component to multiply the current matrix by

      • d: number

        the d component to multiply the current matrix by

      • e: number

        the e component to multiply the current matrix by

      • f: number

        the f component to multiply the current matrix by

      Returns void

      CanvasRenderer.setTransform which will reset the current transform matrix prior to performing the new transformation

    • adds a translation transformation to the current matrix.

      Parameters

      • x: number

        Distance to move in the horizontal direction. Positive values are to the right, and negative to the left.

      • y: number

        Distance to move in the vertical direction. Positive values are down, and negative are up.

      Returns void

    Settings

    Member Visibility

    On This Page

    Constructors
    Properties
    Accessors
    Methods