CODEWITHSUNDEEP
javascriptcanvas
user4849933
user4849933

Reputation:

Give Rectangle an id

http://fiddle.jshell.net/f6rLds4g/6/

Is it possible to give the rectangle that i make an id ?

What I whant is , that when i click on a rectangle that it shows data in the next canvas

So instead of rectangle 0 clicked it must show data (from json or xml of database) but before i can make that , it should have id (I think)

  var canvas = $('#NodeList').get(0);
var ctx = canvas.getContext('2d');
canvas.height = 0;

var a = 20;
var x = 150;
var y = 100;


var rects = [
    [a, 20, x, y],
    [a, 220, x, y],
    [a, 420, x, y],
    [a, 620, x, y],
    [a, 820, x, y],
    [a, 1020, x, y],
    [a, 1220, x, y],
    [a, 1420, x, y],
    [a, 1620, x, y],
    [a, 1820, x, y]



];
for (var i = 0; i < rects.length; i++) {
    canvas.height = canvas.height + 200;
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    //rectangles opnieuw tekenen
    for (var j = 0; j < i; j++) {
        ctx.fillRect(rects[j][0],
        rects[j][1],
        rects[j][2],
        rects[j][3]);
    }
    ctx.fillRect(rects[i][0],
    rects[i][1],
    rects[i][2],
    rects[i][3]);

}

$('#NodeList').click(function (e) {
    var x = e.offsetX,
        y = e.offsetY;



        for (var i = 0; i < rects.length; i++) {
    if (x > rects[i][0] && x < rects[i][0] + rects[i][2] && y > rects[i][1] && y < rects[i][1] + rects[i][3]) {
        var canvas = document.getElementById("NodeDisplay");
        var context = canvas.getContext('2d');
        context.clearRect(0, 0, canvas.width, canvas.height);
        context.fillText('Rectangle ' + i + ' clicked', 110, 10);
    }
}



});

For the whole html page click on the link at the beginning

Upvotes: 0

Views: 3744

Answers (2)

markE
markE

Reputation: 105035

You are saving your rects in an array: var rects=[].

You are representing each rect as an array containing x,y,width,height.

So if you want to give each rect an id, simply add an id to each rect's array:

var rects = [
    [a, 20, x, y, 'rect0'],
    [a, 220, x, y, 'rect1'],
    [a, 420, x, y, 'rect2'],
    [a, 620, x, y, 'rect3'],
    [a, 820, x, y, 'rect4'],
    [a, 1020, x, y, 'rect5'],
    [a, 1220, x, y, 'rect6'],
    [a, 1420, x, y, 'rect7'],
    [a, 1620, x, y, 'rect8'],
    [a, 1820, x, y, 'rect9']
];

Then you can access the id element of the rect array when needed:

// test if this is rect with id=='rect3'
var n=3;
if(rects[n][4]=='rect3'){ alert('I have the id==rect3'); }

Upvotes: 1

Siguza
Siguza

Reputation: 23880

You can assign ids only to elements.
Since your rectangle is not an element, but the content of a canvas, it cannot have an id.

However, there are three ways to work around this that come to my mind:

  1. Assign a click event listener to your canvas and check with JavaScript whether the clicked coordinates are inside a rectangle or not.

  2. Use HTML elements instead of drawing rectangles on a canvas. An element with a fixed width, height, display: block and position: absolute will appear exactly the same, but being an HTML element, it can have an id.

  3. Draw whatever you want on your canvas and put a map tag with clickable areas over your it. This way you have precise control over the color value and clickability of every single pixel, but the code might get lengthy and it is probably a bit overkill for just rectangles.

Upvotes: 1

Related Questions