Multiplication of canvas lineTo coordinates performance?

Question

multiplication of canvas line coordinates, is there anyway to lose the multiplication of the coordinates? Like for each object in the rects and rects2, the computer would have calculated all the possible outcomes before the code starts? full code at: https://github.com/GunZi200/Memory-Colour/blob/master/SourceCode.js

The example below is just a shape with no color fill, but I do also fill the shape with a colour as seen in the rects array.

I feel like these multiplications give off bad performance...? Or maybe it doesn't affect the performance at all?

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();