I am looking to create an animation that scales the two Bezier curves of my Heart canvas element. I attempted to adjust the values in front of all bezier curve parameters, but unfortunately, it stopped drawing the bezier curve altogether. How can I successfully scale both curves to make them larger?
Heartdraw()
draw2(): void {
crc2.beginPath();
crc2.restore();
crc2.moveTo(this.x, this.y);
crc2.bezierCurveTo(this.x + 82, this.y - 40, this.x, this.y - 80, this.x, this.y - 50);
crc2.save();
crc2.stroke();
crc2.moveTo(this.x, this.y);
crc2.bezierCurveTo(this.x - 82, this.y - 40, this.x, this.y - 80, this.x, this.y - 50);
crc2.fillStyle = "Red";
crc2.fill();
crc2.restore();
crc2.closePath();
crc2.save();
}
}
My previous attempts:
initScale: number = 1;
scaleVal: number;
animate(): void {
if(this.scaleVal == 1){
this.scaleVal += 2;
}
else if (this.scaleVal == 3) {
this.scaleVal -= 2;
}
}
draw2(): void {
crc2.beginPath();
crc2.restore();
crc2.moveTo(this.x, this.y);
crc2.bezierCurveTo(this.scaleVal * this.x + 82, this.scaleVal * this.y - 40, this.scaleVal * this.x, this.scaleVal * this.y - 80, this.scaleVal * this.x, this.scaleVal * this.y - 50);
crc2.save();
crc2.stroke();
crc2.moveTo(this.x, this.y);
crc2.bezierCurveTo(this.x - 82, this.y - 40, this.x, this.y - 80, this.x, this.y - 50);
crc2.fillStyle = "Red";
crc2.fill();
crc2.scale(this.xScale, this.yScale);
crc2.restore();
crc2.closePath();
crc2.save();
}
}