Hey there! I've been working with HTML5 canvas and I need some help drawing rectangles dynamically. Currently, I can draw on the canvas but I want to make it more flexible.
x, y: These represent the coordinates of where the rectangle should be positioned on the canvas.
w: Indicates the width of the rectangle.
h: Denotes the height of the rectangle.
f: If set to true, the rectangle will be filled without a border. If set to false, the rectangle will have a border but no filling.
var canvas = document.getElementById("c");
var context = canvas.getContext("2d");
var json = [{
"x": "50",
"y": "50",
"w": "100",
"h": "50",
"f": "true"
},
{
"x": "50",
"y": "150",
"w": "100",
"h": "50",
"f": "false"
}
];
context.beginPath();
for (var i in json) {
context.lineTo(json[i].x, json[i].y, json[i].w, json[i].h, json[i].f)
}<canvas id="c"></canvas>