画布线的乘法要协调性能？

Question

画布线坐标的乘法，无论如何都会失去坐标的乘法？就像rects和rects2中的每个对象一样，计算机会在代码开始之前计算出所有可能的结果吗？完整代码：https://github.com/GunZi200/Memory-Colour/blob/master/SourceCode.js

下面的示例只是一个没有颜色填充的形状，但我也会用rects数组中的颜色填充形状。

我觉得这些乘法会带来糟糕的表现......？或者它可能根本不影响性能？

var rects = [{x: 10 * Xf, y: 10 * Yf, w: xc, h: yc, color: 'Green'},        //Green
        {x: 110 * Xf, y: 10 * Yf, w: xc, h: yc, color: '#DC143C'},          //Red
        {x: 10 * Xf, y: 130 * Yf, w: xc, h: yc, color: "#1E90FF"},          //Blue
        {x: 10 * Xf, y: 250 * Yf, w: xc, h: yc, color: "Gold"},             //Gold
        {x: 110 * Xf, y: 250 * Yf, w: xc, h: yc, color: "#8B008B"},         //Purple
        {x: 210 * Xf, y: 10 * Yf, w: xc, h: yc, color: "#DDA0DD"},          //Pink
        {x: 210 * Xf, y: 130 * Yf, w: xc, h: yc, color: "#FF8C00"},         //Orange k6
        {x: 210 * Xf, y: 250 * Yf, w: xc, h: yc, color: "Lightseagreen"},   //Lightseagreen
        {x: 110 * Xf, y: 130 * Yf, w: xc, h: yc, color: "Brown"}];          //Brown

var rects2 = [{x: 10, y: 10},   //Green
        {x: 110, y: 10},        //Red
        {x: 10, y: 130},        //Blue
        {x: 10, y: 250},        //Gold
        {x: 110, y: 250},       //Purple
        {x: 210, y: 10},        //Pink
        {x: 210, y: 130},       //Orange k6
        {x: 210, y: 250},       //Lightseagreen
        {x: 110, y: 130}];      //Brown


                for (i = 0; i < lengd; i += 1) {
                    if (collides([rects[i]], ex, ey)) {
                        var rightBox = rects[i];
                        var rectangle = rects2[i];
                    }
                }
                ctx.beginPath();
                ctx.moveTo((rectangle.x + 10) * Xf, rightBox.y);
                ctx.lineTo((rectangle.x + 80) * Xf, rightBox.y);
                ctx.quadraticCurveTo((rectangle.x + 90) * Xf, rightBox.y, (rectangle.x + 90) * Xf, (rectangle.y + 10) * Yf);
                ctx.lineTo((rectangle.x + 90) * Xf, (rectangle.y + 100) * Yf);
                ctx.quadraticCurveTo((rectangle.x + 90) * Xf, (rectangle.y + 110) * Yf, (rectangle.x + 80) * Xf, (rectangle.y + 110) * Yf);
                ctx.lineTo((rectangle.x + 10) * Xf, (rectangle.y + 110) * Yf);
                ctx.quadraticCurveTo(rightBox.x, (rectangle.y + 110) * Yf, rightBox.x, (rectangle.y + 100) * Yf);
                ctx.lineTo(rightBox.x, (rectangle.y + 10) * Yf);
                ctx.quadraticCurveTo(rightBox.x, rightBox.y, (rectangle.x + 10) * Xf, rightBox.y);
                ctx.lineWidth = 4;
                ctx.strokeStyle = 'red';
                ctx.stroke();