How can I improve this requestAnimationFrame drawing? (Low FPS, around 20)

Question

The problem lies whenever the program does the animation at a very fast rate, it becomes extremely lagging. I have been trying all I can to improve this code below... But I can not think of anything useful...

I know some of you might say: "Draw less" or something like that, but that just is not possible.

This basically draws a small rectangle with rounded corners and makes it larger each frame until it reaches a specific size seen in the if statements.

Full code if needed: https://github.com/GunZi200/Memory-Colour/blob/master/SourceCode.js

function turnEvent(AnX, AnY) {
    var lengd = rects.length;
    eventDone = false,
    one30 = 18,
    one40 = 18,  
    one301 = false, 
    one401 = false;
    for (var i = 0; i < lengd; i += 1) {
        // Indentifying rectangle in use, so we can access the color, and position.
        if (collides([rects[i]], AnX, AnY)) {
            var rightBox = rects[i];
            var rectangle = rects2[i];
        }
    }
    rounded_rect(rectangle.x, rectangle.y, 90, 110, 10, 'black', 'black');
    function render() {
        ctx.beginPath();
        ctx.fillStyle = rightBox.color;
        ctx.moveTo((rectangle.x + 42 - one40) * Xf, (rectangle.y + 32 - one30) * Yf);
        ctx.lineTo((rectangle.x + 48 + one40) * Xf, (rectangle.y + 32 - one30) * Yf);
        ctx.quadraticCurveTo((rectangle.x + 58 + one30) * Xf, (rectangle.y + 32 - one30) * Yf, (rectangle.x + 58 + one30) * Xf, (rectangle.y + 42 - one40) * Yf);
        ctx.lineTo((rectangle.x + 58 + one30) * Xf, (rectangle.y + 68 + one40) * Yf);
        ctx.quadraticCurveTo((rectangle.x + 58 + one30) * Xf, (rectangle.y + 78 + one30) * Yf, (rectangle.x + 48 + one40) * Xf, (rectangle.y + 78 + one30) * Yf);
        ctx.lineTo((rectangle.x + 42 - one40) * Xf, (rectangle.y + 78 + one30) * Yf);
        ctx.quadraticCurveTo((rectangle.x + 32 - one30) * Xf, (rectangle.y + 78 + one30) * Yf, (rectangle.x + 32 - one30) * Xf, (rectangle.y + 68 + one40) * Yf);
        ctx.lineTo((rectangle.x + 32 - one30) * Xf, (rectangle.y + 42 - one40) * Yf);
        ctx.quadraticCurveTo((rectangle.x + 32 - one30) * Xf, (rectangle.y + 32 - one30) * Yf, (rectangle.x + 42 - one40) * Xf, (rectangle.y + 32 - one30) * Yf);
        ctx.fill();
        ctx.closePath();
        ctx.fillStyle = fillstyle;
        if (one30 === 30) {
            one30 += 0;
            one301 = true;
        } else {
            one30 += 2;
        }
        if (one40 === 30) {
            one401 = true;
        } else {
            one40 += 1;
        }
        if (one401 && one301) {
            eventDone = true;
        }
    }
    (function animloop(){
        if (eventDone) {//condition to stop requestAnimationFrame();
            eventDone = false;
            ctx.clearRect(0, 0, 310 * Xf, 365 * Yf);
            ---------ctx.putImageData(imgData, 0, 0);--------------
            return;
        };
        requestAnimationFrame(animloop);
        render();
    })();
}

EDIT: The problem is to make the actual image. I cannot render it onto a cached canvas because Images in HD will be simply to big. I am developing this for iPhone, Retina Displays.

I render the UI before i run these if statements below, and simply take a picture of a "part" of it. I use the main canvas to keep the quality of the image. If I use drawImage...what image do I use? I do not want to use a file, but I wont mind any examples of that? :)

if (x === 414 && y === 736) {
    imgData = ctx.getImageData(0,0,3*x,3*365*Yf); // iPhone 6+ and 6
} else if (x === 768 && y === 1024) {
    if (a_canvas.width === 2 * x) {
        imgData = ctx.getImageData(0,0,2*x,2*365*Yf); // normal retina
    } else {
        imgData = ctx.getImageData(0,0,x,365*Yf); // non-Retina displays
    }
} else {
    imgData = ctx.getImageData(0,0,2*x,2*365*Yf); // normal retina
}