1

I need to highlight a child canvas component inside the parent canvas component. The parent canvas is a circle and the child canvas components are small circles inside it. I need to highlight these specific small circles when hovered over another components. How can I do this ?

Canvas

  <canvas aura:id="Chart" id="radarCHart123" width="600" height="600"/>

Function to draw Main circle in canvas

baseMap: function(cmp, evt, helper){

    var canvas = component.find("Chart").getElement();
    var context = canvas.getContext("2d");

   var radius = 270;
    var center_x = 290;
    var center_y = 290;

    var canvas = component.find("Chart").getElement();
    var context = canvas.getContext("2d");


      context.fillStyle = "#3F84F9";
      context.beginPath();
      context.arc(center_x,center_y,radius,0,2*Math.PI);
      context.closePath();
      context.fill();

      context.fillStyle = "blue";
      context.beginPath();
      context.arc(center_x,center_y,radius/1.5,0,2*Math.PI);
      context.closePath();
      context.fill();

      context.fillStyle = "#1B24A3";
      context.beginPath();
      context.arc(center_x,center_y,radius/3,0,2*Math.PI);
      context.closePath();
      context.fill();

   }

Function to draw mini circles inside Main circle

  points : function(cmp, evt, helper){

    var canvas = component.find("Chart").getElement();
    var context = canvas.getContext("2d");

    for(var i=0; i< obj.length; i++){
      // Some logic to get the co ordinates (x, y) and point_size
        context.beginPath();
        context.arc(x, y, point_size, 0, 2*Math.PI);
        context.fillStyle = "yellow";
        context.fill(); 
        context.font = font_size;
        context.fillStyle = "black";
        context.fillText(label,x-7,y+2);

    }

I am new to canvas. So please bear if this question is very basic or repeated.

If I hover mouse over the name on the right, it should highlight (like colour change for example) the marked point in the chart on the left. I can get the required Id's on hover. Canvas Image

  • You'll want to use events to communicate with the child components. – sfdcfox Sep 13 '17 at 16:17
  • Thanks.. But how can I use css here on the circles ? – Brav Sep 13 '17 at 17:53
  • You wouldn't use CSS on a canvas. That said, if we had a visual of what you were trying to do, we could probably help you. – sfdcfox Sep 13 '17 at 18:16
  • I have added an image. Hope its clear now.. – Brav Sep 13 '17 at 18:30
  • Ah, so this is a follow up to this question. You might have mentioned that for some context. – sfdcfox Sep 13 '17 at 19:27

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.