diff --git a/examples/al-catalog-hips-shape.html b/examples/al-catalog-hips-shape.html
new file mode 100644
index 00000000..9bff23dd
--- /dev/null
+++ b/examples/al-catalog-hips-shape.html
@@ -0,0 +1,44 @@
+<!doctype html>
+<html>
+<head>
+</head>
+<body>
+
+<div id="aladin-lite-div" style="width: 1024px; height: 768px"></div>
+
+<div id='aladin-statsDiv'></div>
+<script type="text/javascript" src="./../aladin.js" charset="utf-8"></script>
+
+<script type="text/javascript">
+    let aladin;
+    A.init.then(() => {
+        aladin = A.aladin('#aladin-lite-div', {target: 'LMC', fov: 55, showContextMenu: true});
+        // define custom draw function
+        var drawFunction = function(source, canvasCtx, viewParams) {
+            canvasCtx.beginPath();
+            canvasCtx.arc(source.x, source.y, source.data['coo_err_min'] * 5, 0, 2 * Math.PI, false);
+            canvasCtx.closePath();
+            canvasCtx.strokeStyle = '#c38';
+            canvasCtx.lineWidth = 3;
+            canvasCtx.globalAlpha = 0.7,
+            canvasCtx.stroke();
+            var fov = Math.max(viewParams['fov'][0], viewParams['fov'][1]);
+
+            // object name is displayed only if fov<10°
+            if (fov>10) {
+                return;
+            }
+
+            canvasCtx.globalAlpha = 0.9;
+            canvasCtx.globalAlpha = 1;
+        };
+
+        var hips = A.catalogHiPS('https://axel.u-strasbg.fr/HiPSCatService/Simbad', {onClick: 'showTable', name: 'Simbad', shape: drawFunction});
+        aladin.addCatalog(hips);
+    });
+</script>
+
+</body>
+</html>
+
+
diff --git a/src/js/Catalog.js b/src/js/Catalog.js
index c7975533..883e1b8d 100644
--- a/src/js/Catalog.js
+++ b/src/js/Catalog.js
@@ -576,12 +576,7 @@ export let Catalog = (function() {
                     sourcesInsideView.push(s);
                 }
             }
-
-            //if (this.drawSource(s, ctx, width, height)) {
-            //    sourcesInsideView.push(s);
-            //}
         });
-        //this.view.wasm.drawSources(this.sources, ctx);
 
         return sourcesInsideView;
     };
diff --git a/src/js/ProgressiveCat.js b/src/js/ProgressiveCat.js
index b3f6ad53..eed61d5a 100644
--- a/src/js/ProgressiveCat.js
+++ b/src/js/ProgressiveCat.js
@@ -79,10 +79,21 @@ export let ProgressiveCat = (function() {
         // we cache the list of sources in each healpix tile. Key of the cache is norder+'-'+npix
         this.sourcesCache = new Utils.LRUCache(256);
 
+        //added to allow hips catalogue to also use shape functions
+        if (this.shape instanceof Image || this.shape instanceof HTMLCanvasElement) {
+            this.sourceSize = this.shape.width;
+        }
+        this._shapeIsFunction = false; // if true, the shape is a function drawing on the canvas
+        if (typeof this.shape === 'function') {
+            this._shapeIsFunction = true;
+        }
+
         this.updateShape(options);
 
         this.maxOrderAllsky = 2;
         this.isReady = false;
+
+        this.tilesInView = [];
     };
 
     // TODO: to be put higher in the class diagram, in a HiPS generic class
@@ -212,8 +223,6 @@ export let ProgressiveCat = (function() {
         return sources;
     };
 
-    //ProgressiveCat.prototype.updateShape = Catalog.prototype.updateShape;
-
     ProgressiveCat.prototype = {
 
         init: function(view) {
@@ -345,13 +354,13 @@ export let ProgressiveCat = (function() {
                 return;
             }
 
+            if (this._shapeIsFunction) {
+                ctx.save();
+            }
+
             this.drawSources(this.order1Sources, ctx, width, height);
             this.drawSources(this.order2Sources, ctx, width, height);
             this.drawSources(this.order3Sources, ctx, width, height);
-            
-            if (!this.tilesInView) {
-                return;
-            }
 
             var sources, key, t;
             for (var k=0; k<this.tilesInView.length; k++) {
@@ -362,6 +371,10 @@ export let ProgressiveCat = (function() {
                     this.drawSources(sources, ctx, width, height);
                 }
             }
+
+            if (this._shapeIsFunction) {
+                ctx.restore();
+            }
         },
         drawSources: function(sources, ctx, width, height) {
             if (!sources) {
