Rendering API

The melonJS rendering API is designed to feel familiar to anyone who has used the HTML5 Canvas 2D API (CanvasRenderingContext2D). Whether you choose the Canvas or WebGL renderer, the API remains the same — write your game once, and it runs on both backends with zero code changes.

Quick Example

// This code works identically on Canvas and WebGL
renderer.save();
renderer.translate(100, 50);
renderer.rotate(Math.PI / 4);
renderer.setColor("#FF0000");
renderer.fillRect(0, 0, 64, 64);
renderer.restore();

If you've used ctx.save(), ctx.translate(), ctx.fillRect() on a Canvas 2D context, you already know the melonJS rendering API.

API Reference Table

The table below maps every melonJS renderer method to its Canvas 2D equivalent.

State Management

melonJS	Canvas 2D Equivalent	Description
save()	ctx.save()	Push the current renderer state onto a stack
restore()	ctx.restore()	Pop and restore the most recently saved state
reset()	—	Reset the entire renderer context to its default state
clear()	—	Prepare the framebuffer for a new frame
flush()	—	Flush the render pipeline (WebGL batches; no-op on Canvas)

Transforms

melonJS	Canvas 2D Equivalent	Description
translate(x, y)	ctx.translate(x, y)	Add a translation transformation
rotate(angle)	ctx.rotate(angle)	Add a rotation (radians) to the transformation matrix
scale(x, y)	ctx.scale(x, y)	Add a scaling transformation
transform(a, b, c, d, e, f)	ctx.transform(a, b, c, d, e, f)	Multiply the current matrix by the given one
setTransform(a, b, c, d, e, f)	ctx.setTransform(a, b, c, d, e, f)	Reset the matrix then apply the given one
resetTransform()	ctx.setTransform(1,0,0,1,0,0)	Reset the transformation matrix to identity
setProjection(matrix)	—	Set the projection matrix (orthographic)

Color, Gradients & Alpha

melonJS	Canvas 2D Equivalent	Description
setColor(color)	ctx.fillStyle / ctx.strokeStyle	Set the current fill and stroke color (accepts Color, string, or Gradient)
getColor()	—	Get the current fill and stroke color
createLinearGradient(x0, y0, x1, y1)	ctx.createLinearGradient(x0, y0, x1, y1)	Create a linear gradient fill
createRadialGradient(x0, y0, r0, x1, y1, r1)	ctx.createRadialGradient(x0, y0, r0, x1, y1, r1)	Create a radial gradient fill
gradient.addColorStop(offset, color)	gradient.addColorStop(offset, color)	Add a color stop to a gradient
setGlobalAlpha(alpha)	ctx.globalAlpha = alpha	Set the global alpha (opacity)
getGlobalAlpha()	ctx.globalAlpha	Get the current global alpha
setTint(tint, alpha)	—	Set a coloring tint for sprite rendering
clearTint()	—	Clear the current rendering tint
setBlendMode(mode)	ctx.globalCompositeOperation	Set the blend/composite mode
getBlendMode()	ctx.globalCompositeOperation	Get the current blend mode

Drawing — Rectangles

melonJS	Canvas 2D Equivalent	Description
fillRect(x, y, w, h)	ctx.fillRect(x, y, w, h)	Fill a rectangle
strokeRect(x, y, w, h)	ctx.strokeRect(x, y, w, h)	Stroke a rectangle outline
clearRect(x, y, w, h)	ctx.clearRect(x, y, w, h)	Erase pixels in a rectangular area
clearColor(color, opaque)	—	Clear the framebuffer with a solid color
fillRoundRect(x, y, w, h, r)	ctx.roundRect() + ctx.fill()	Fill a rounded rectangle
strokeRoundRect(x, y, w, h, r)	ctx.roundRect() + ctx.stroke()	Stroke a rounded rectangle outline

Drawing — Paths

melonJS	Canvas 2D Equivalent	Description
beginPath()	ctx.beginPath()	Start a new path
closePath()	ctx.closePath()	Close the current sub-path
moveTo(x, y)	ctx.moveTo(x, y)	Move to a point without drawing
lineTo(x, y)	ctx.lineTo(x, y)	Draw a straight line to a point
rect(x, y, w, h)	ctx.rect(x, y, w, h)	Add a rectangle to the current path
roundRect(x, y, w, h, radii)	ctx.roundRect(x, y, w, h, radii)	Add a rounded rectangle to the current path
stroke(shape)	ctx.stroke()	Stroke the current path or a given shape
fill(shape)	ctx.fill()	Fill the current path or a given shape

Drawing — Shapes

melonJS	Canvas 2D Equivalent	Description
strokeArc(x, y, r, start, end)	ctx.arc() + ctx.stroke()	Stroke an arc
fillArc(x, y, r, start, end)	ctx.arc() + ctx.fill()	Fill an arc
strokeEllipse(x, y, w, h)	ctx.ellipse() + ctx.stroke()	Stroke an ellipse
fillEllipse(x, y, w, h)	ctx.ellipse() + ctx.fill()	Fill an ellipse
strokeLine(x1, y1, x2, y2)	ctx.moveTo() + ctx.lineTo() + ctx.stroke()	Stroke a line between two points
fillLine(x1, y1, x2, y2)	ctx.moveTo() + ctx.lineTo() + ctx.fill()	Fill a line between two points
strokePolygon(poly)	ctx.lineTo() loop + ctx.stroke()	Stroke a polygon
fillPolygon(poly)	ctx.lineTo() loop + ctx.fill()	Fill a polygon
strokePoint(x, y)	—	Stroke a single point
fillPoint(x, y)	—	Fill a single point

Images & Patterns

melonJS	Canvas 2D Equivalent	Description
drawImage(image, ...)	ctx.drawImage(image, ...)	Draw an image (supports all 3/5/9 argument forms)
createPattern(image, repeat)	ctx.createPattern(image, repeat)	Create a repeating image pattern
drawPattern(pattern, x, y, w, h)	ctx.fillStyle = pattern + ctx.fillRect()	Draw a pattern within a rectangle

Clipping & Masking

melonJS	Canvas 2D Equivalent	Description
clipRect(x, y, w, h)	ctx.rect() + ctx.clip()	Clip rendering to a rectangular region
setMask(mask, invert)	ctx.clip() / gl.stencilFunc()	Apply an arbitrary shape as a rendering mask
clearMask()	—	Remove the current rendering mask

Pixel Smoothing

melonJS	Canvas 2D Equivalent	Description
setAntiAlias(enable)	ctx.imageSmoothingEnabled	Enable or disable image smoothing/anti-aliasing

Canvas Access

melonJS	Canvas 2D Equivalent	Description
getCanvas()	canvas	Return the underlying canvas element
getContext()	canvas.getContext('2d')	Return the underlying rendering context
resize(w, h)	Setting canvas.width / canvas.height	Resize the rendering canvas
overlaps(bounds)	—	Check if a bounding box overlaps the visible area
toBlob(type, quality)	canvas.toBlob()	Export the current frame as a Blob
toDataURL(type, quality)	canvas.toDataURL()	Export the current frame as a data URL
toImageBitmap(type, quality)	createImageBitmap(canvas)	Export the current frame as an ImageBitmap

WebGL-Only

These methods are specific to the WebGL renderer and have no Canvas 2D equivalent:

melonJS	Description
addBatcher(batcher, name)	Add a custom batcher for specialized rendering
setBatcher(name, shader)	Switch the active rendering batcher
setViewport(x, y, w, h)	Set the WebGL viewport rectangle
WebGLVersion	Returns the WebGL version in use (1 or 2)
getSupportedCompressedTextureFormats()	List supported GPU compressed texture formats

Key Differences from Canvas 2D

While the API mirrors Canvas 2D closely, there are a few design differences:

1. Unified color setter — melonJS uses setColor(color) to set both fillStyle and strokeStyle at once, rather than having two separate properties.

2. Convenience shape methods — Instead of building paths manually, melonJS provides direct strokeRect, fillEllipse, strokePolygon, etc. methods that accept melonJS shape objects (Rect, Ellipse, Polygon).

3. Tinting — setTint() / clearTint() provide sprite-level color tinting with no Canvas 2D equivalent.

4. Automatic batching — The WebGL renderer automatically batches draw calls. Call flush() explicitly only when you need to force a batch submission (e.g. before reading pixels).

5. Blend modes — Both renderers support the same blend mode names (normal, multiply, screen, additive, etc.), abstracting away the difference between globalCompositeOperation (Canvas) and GL blend functions (WebGL).

Choosing a Renderer

import { Application } from "melonjs";

// Auto-detect (WebGL with Canvas fallback)
const app = new Application(800, 600, { renderer: 2 });

// Force Canvas
const app = new Application(800, 600, { renderer: 0 });

// Force WebGL
const app = new Application(800, 600, { renderer: 1 });

The renderer is accessed via app.renderer and provides the full API listed above regardless of which backend is active.