เพิ่ม/ลด หน่วยใน HTML5 Canvas Grid (Scale)

เมธอด scale(x, y)

ปรับขนาดหน่วยใน Canvas Grid สร้าง Shapes ขยาย/ย่อได้

• x - Horizontal Scale Factor
• y - Vertical Scale Factor
• ต้องเป็น Positive Numbers

ตัวอย่าง: Uniform และ Non-uniform Scaling

ctx.save();
ctx.translate(50, 50);
drawSpirograph(ctx, 22, 6, 5); // Original

ctx.translate(100, 0);
ctx.scale(0.75, 0.75); // Uniform Scale Down 75%
drawSpirograph(ctx, 22, 6, 5);

ctx.translate(133.33, 0);
ctx.scale(0.75, 0.75); // Scale Down อีก (คูณสะสม)
drawSpirograph(ctx, 22, 6, 5);
ctx.restore();

// Non-uniform: Scale X Only
ctx.save();
ctx.translate(50, 150);
ctx.scale(1, 0.75); // Y Only
drawSpirograph(ctx, 22, 6, 5);
ctx.restore();

สำคัญ: scale() สะสม (Multiply) ต้องใช้ save()/restore() หรือ setTransform() รีเซ็ต