javascript - クリップ領域でズーム キャンバスが機能しない

Question

ズームインおよびズームアウト効果に次のコードを使用しています。問題は、キャンバスでクリップ[ストロークの色で円にクリップすると仮定]を実行してから、このズームインを実行していることです。すべての要素がズームされていますが、クリップ領域はズームされていません。ズームするクリップ領域を作成するにはどうすればよいですか?

クリップ方法 ::

canvas.clipTo = function(ctx) {
                        var shp = new fabric.Rect({
                            top : top_Pos,
                            left : left_Pos,
                            width : c_width,
                            height : c_height,
                            fill:'',
                            stroke : 'red',
                            strokeWidth : 5

                        });
                        shp.render(ctx);
                    };

ズーム方法 ::

// Zoom In
    function zoomIn() {
        // TODO limit the max canvas zoom in
        console.log('zoom in called');
        if (zoomEffect == false) {

            canvasScale = canvasScale * SCALE_FACTOR;

            canvas.setHeight(canvas.getHeight() * SCALE_FACTOR);
            canvas.setWidth(canvas.getWidth() * SCALE_FACTOR);

            var objects = canvas.getObjects();
            for (var i in objects) {
                var scaleX = objects[i].scaleX;
                var scaleY = objects[i].scaleY;
                var left = objects[i].left;
                var top = objects[i].top;

                var tempScaleX = scaleX * SCALE_FACTOR;
                var tempScaleY = scaleY * SCALE_FACTOR;
                var tempLeft = left * SCALE_FACTOR;
                var tempTop = top * SCALE_FACTOR;

                objects[i].scaleX = tempScaleX;
                objects[i].scaleY = tempScaleY;
                objects[i].left = tempLeft;
                objects[i].top = tempTop;

                objects[i].setCoords();
            }

            canvas.renderAll();
            zoomEffect = true;
        }
    }

    // Zoom Out
    function zoomOut() {
        // TODO limit max cavas zoom out
        console.log('zoom out called');
        if (zoomEffect == true) {

        canvasScale = canvasScale / SCALE_FACTOR;

        canvas.setHeight(canvas.getHeight() * (1 / SCALE_FACTOR));
        canvas.setWidth(canvas.getWidth() * (1 / SCALE_FACTOR));

        var objects = canvas.getObjects();
        for (var i in objects) {
            var scaleX = objects[i].scaleX;
            var scaleY = objects[i].scaleY;
            var left = objects[i].left;
            var top = objects[i].top;

            var tempScaleX = scaleX * (1 / SCALE_FACTOR);
            var tempScaleY = scaleY * (1 / SCALE_FACTOR);
            var tempLeft = left * (1 / SCALE_FACTOR);
            var tempTop = top * (1 / SCALE_FACTOR);

            objects[i].scaleX = tempScaleX;
            objects[i].scaleY = tempScaleY;
            objects[i].left = tempLeft;
            objects[i].top = tempTop;

            objects[i].setCoords();
        }
            }
        canvas.renderAll();
            zoomEffect = false;
    }