Automatically add pixels when adding rectangle to canvas

Question

For the moment, I have this

var x = 150;
var o = 100;
var canvas = $('#NodeList').get(0);
var ctx = canvas.getContext('2d');

ctx.strokeStyle = "red";
canvas.height = 0;

var rects = [
    [20, 20, x, o],
    [20, 130, x, o],
    [20, 240, x, o],
    [20, 350, x, o],
    [20, 460, x, o],
    [20, 570, x, o],
    [20, 680, x, o],
    [20, 790, x, o],
    [20, 900, x, o]
];

as you can see i have added manually every rectangle.

I want to add automatically 70 pixels by each rectangle added by uses a jQuery function drawRect().

I have tried this so far Jcanvas

My reason for this is that i want to load data into an other canvas by clicking on the rectangle in this "canvas". I think it would be easier by using JQuery drawRect() instead of typing it manually like I did below. Since the rectangles dont have any ID.

I am stuck can you please clearify things for me?

please simplify you question it's quite difficult to understand what exactly you want. Do you want to create the array in a loop or what? — micnic, May 18 '15 at 11:47
@micnic i want a jquery that creates rects by using .drawRect () — Script, May 18 '15 at 13:33

score 0 · Answer 1 · answered May 18 '15 at 13:49

You need something like this as I understood from your comment:

// Using Canvas API
ctx.fillStyle = '#000000';

rects.forEach(function (rect) {
    ctx.fillRect.apply(ctx, rect);
});

// Using Jcanvas
var canvas = $('#NodeList');

rects.forEach(function (rect) {
    canvas.drawRect({
        fillStyle: '#000000',
        x: rect[0],
        y: rect[1],
        width: rect[2],
        height: rect[3]
    });
});

Automatically add pixels when adding rectangle to canvas

1 Answers1