translate()

Shifts the entire coordinate system by a horizontal and vertical amount

Examples

translate(100,100)
square(50,100,100)

translate(mouseX,mouseY)
square(50,100,100)

Syntax

translate(x,y)

Input	Description
x	Horizontal translation (left/right)
y	Vertical translation(up/down)

a) Translated tick axes b) Square moved to new position (150,200)

Description

The translate() function is used to move the origin point of the coordinate system to a new location.

When you call the translate() function, all subsequent drawing commands will be relative to the new origin point. This means that if you draw a shape or line at position (50, 50) after calling translate(100, 100), it will actually appear at position (150, 150) on the canvas.

Find these documents helpful? Let the people who made them help your child learn to code at Strivemath!

We'd love to hear your Feedback/Comments here.