CODEWITHSUNDEEP
javascripthtmlcanvas
Ali ATriple
Ali ATriple

Reputation: 179

Make multiple canvas or overlay drawings on the same canvas html5

I need your advice, I have a html with canvas, in this html you can add circles and then link these to make a figure, I also want to insert a search where you can find the different figures and focussed on it, so I don't know if it'll be better : to overlay the figures or use different canvas for each figure. (I'm not implement the search function yet.) What do you think?

Here is the functions that makes de draws

//this function puts the circles on a <table>, and then the other function takes the img coordinates and link it making a figure.

function position(year, mon)
{
    $('#' + year + ' .' + mon).prepend('<img class="black_point" src="./images/circle.png"/>');
}

     var table = document.getElementById("tabla");
        var images = table.getElementsByTagName("img");  
        var canvas = document.getElementById("miCanvas");
        var ctx = canvas.getContext("2d");
        var x,y; // Remember coordinates

        canvas.width  = table.offsetWidth;
        canvas.height = table.offsetHeight;

        function connect(image, index) { //this function link the images
            var tabBcr = table.getBoundingClientRect();
            var imgBcr = image.getBoundingClientRect();
            x = imgBcr.left + (imgBcr.width / 2) - tabBcr.left;
            y = imgBcr.top + (imgBcr.height / 2) - tabBcr.top;
            index === 0 ? ctx.moveTo(x, y) : ctx.lineTo(x, y);
        }

        //this function add a new canvas
        function figure(){
         /*$('#miCanvas').prepend('<canvas id="myCanvas">Su navegador no soporta Canvas.</canvas>');
         //this is the property who overlay the figures
         cxt.globalCompositeOperation="source-over";/*
  //which it will be better to implement a search function?
        }

        // new path here
        ctx.beginPath();

        for(var i=0; i<images.length; i++){ 
          connect( images[i], i);  // provide index so we can sep. move/line
        }

        // then at the end:
        ctx.fill();

Upvotes: 0

Views: 473

Answers (1)

markE
markE

Reputation: 105015

Use 1 html canvas to hold all your connected circles.

This simplifies the event handling when focusing / blurring your figures.

You can test if the mouse is inside one of your circles like this:

// given a circle defined by centerX, centerY, radius
var dx = mouseX - centerX;
var dy = mouseY - centerY;
var isInside = dx*dx+dy*dy <= radius*radius;

Here's an outline of how to focus on a figure:

  1. Create a javascript object defining each circle. If a set of objects makes up a figure, then add a group property to each circle-object representing which group that circle is a member of.

  2. Put all your circle-objects in an array.

  3. In your mouse event handlers, iterate through the circle-objects-array and find which circle is under the mouse. That circle's group has been focused.

Upvotes: 1

Related Questions