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:

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.
My circle does not appear anywhere.

Any help would be greatly appreciated. :-D

Hello, did you ever manage to get this to work? I'm looking into the same thing at the moment but also no joy with drawing on the canvas so far... — David Basalla, May 22 '14 at 18:16
Alas, no, I never found out a way to do it... Still looking though, but it's on the back burner as the web-app I'm building has a lot stuff to deal with that are more important. But if you have some ideas, I'd be happy to discuss them and see if we can get that somewhere. — JLecoeur, Oct 27 '14 at 14:35
Hey, so I think you'd have to edit the XTK Library to make this work. As far as I remember the render2D canvas redraws it contents continuously, so the circle that you're adding is probably only being displayed for one frame, if at all and then flushed. I worked around this by creating another canvas, copying the X.canvas2D imageData into it, and then drawing my own custom shapes on top of that. Not ideal, since there's a performance hit but it worked for the scope of my project. — David Basalla, Oct 27 '14 at 20:38
That sounds like something that would help a lot... Is there an easy way for you to share some code with me ? — JLecoeur, Nov 04 '14 at 16:09

score 1 · Accepted Answer · answered Nov 26 '14 at 12:52

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

Draw a circle on top of Renderer2D

1 Answers1