Draw a circle on top of Renderer2D

Question

I created a renderer2D so the user can click and pick the centre of a lesion. I want to show the user where he clicked. Currently my idea is to freeze the renderer (so the slice will be the same and the zoom too) and then use the canvas to draw a circle.

Here is my code:

centerpick2D =  new X.renderer2D();
centerpick2D.container = 'pick_center_segment';
centerpick2D.orientation = 'Z';
centerpick2D.init();
centerpick2D.add(volumeT1DCM);
centerpick2D.render();
centerpick2D.interactor.onMouseDown = function(){
  tumorCenter=centerpick2D.xy2ijk(centerpick2D.interactor.mousePosition[0],centerpick2D.interactor.mousePosition[1]);
  centerpick2D.interactor.config.MOUSEWHEEL_ENABLED = false;
  centerpick2D.interactor.config.MOUSECLICKS_ENABLED = false;
  $('canvas').attr('id', 'xtkCanvas');
  var myCanvas = document.getElementById("xtkCanvas");
  var ctx=myCanvas.getContext("2d");
  ctx.fillStyle="#FF0000";
  ctx.beginPath();
  ctx.arc(centerpick2D.interactor.mousePosition[0],centerpick2D.interactor.mousePosition[1],20,0,Math.PI*2,true);
  ctx.closePath();
  ctx.fill();
};

I have two problems:

1. The MOUSEWHEEL_ENABLED=false and MOUSECLICKS_ENABLED = false do not work. I tried adding a centerpick2D.init() which works but add a second canvas on top of the previous one.

2. My circle does not appear anywhere.

Any help would be greatly appreciated. :-D

Answer 1

Sorry took me a while to get this uploaded. Here's a quick overview of how I am copying the XTK canvas' contents into my own canvas and then do my own custom drawing on top of it. The actual code for my project is all over the place, so am just pasting formatted snippets here. Again there's a definite drawback in terms of performance here (due to the copying of pixels), so I think it would be better to introduce all this into the XTK Code in the first place and do all the drawing in one Canvas element.

// initialise animation loop with requestAnimationFrame
startDraw:function(){
        var _this = this;
        var time = new Date().getTime();

        function draw() {
            //update time
            var now = new Date().getTime();

            //only draw the frame if 25 milliseconds have passed!
            if(now > (time + 25)){

                // call drawing function here
                drawFrame();

                time = now;
            }

            requestAnimationFrame(draw);
        }
        requestAnimationFrame(draw);
    };

//...

// actual drawing function, for each frame copy the pixel contents from a XTK canvas 
// into custom canvas and do custom drawing on top of it, so drawing is actually at each
// frame

drawFrame:function(){

    //...

    // this.ctx is the context of my own custom canvas element
    // I use drawImage() function to copy the pixels from this.srcCanvasA
    // this.srcCanvasA is a predefined XTKCanvas

    this.ctx.drawImage(this.srcCanvas, 1, 1)

    // custom func to draw on top of this same canvas (ie. this.ctx) with standard 
    // HTML Canvas functionality, so this is where you could draw your own circle based              
    // on the user mouse coords
    this.drawAnnotation();

    //...
    }

Let me know if you have any more questions. The full code is available here: https://github.com/davidbasalla/IndividualProject