HTML Canvas How can I get the rectangle to move backwards? - css

Question

My code below animates a rectangle to grow right as soon as I start it. How can I make it simultaneously grow left? I have tried (line.x -= line.dx) and a few other variations and it does not seem to work.
const line = {
x: 600,
y: 100,
width: 1,
height: 3,
dx: 1,
dy: 1,
}
let totalLineWidth = line.x + line.width;
const drawLine = () => {
ctx.fillRect(line.x, line.y , line.width, line.height)
}
const update = () => {
drawLine()
line.x += line.dx
requestAnimationFrame(update)
}
update()

Answer 1

At the same time as you draw a new bit to the right, draw a new bit to the left.
The new bit to the left goes an equal amount to the left as the new bit to the right. So that's (600 - (left.x - 600) - and of course update the 600 if you ever change the start position.
Run this snippet in full page and click the button to start the drawing.
const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
const line = {
x: 600,
y: 100,
width: 1,
height: 3,
dx: 1,
dy: 1,
}
let totalLineWidth = line.x + line.width;
const drawLine = () => {
ctx.fillRect(line.x, line.y, line.width, line.height);
ctx.fillRect(600 - (line.x - 600), line.y, line.width, line.height);
}
const update = () => {
drawLine()
line.x += line.dx
requestAnimationFrame(update)
}
//removed just for demo so we can wait until user clicks the button
//update()
canvas {
background-color: pink;
/* just for demo so we can see where the canvas is */
}
<button onclick="update(); this.style.display = 'none';">Click me to start</button>
<br>
<canvas width=1200 height=200></canvas>