jack blank jack blank - 3 months ago 20
HTML Question

2 column grid with canvas

I'm just trying to make a 2 column grid based off an object. I want to put the text in the rectangles eventually. I will show you what I came up with. The main problem is that the recs y positions in the second column are not evenly spaced.
The margins don't look right.



$(function(){

var questions = {
question1 : ["This is a question for statement 1 This is a question for statement 1", 7],
question2 : ["This is a question for statement 2 This is a question for statement 2", 3],
question3 : ["This is a question for statement 3 This is a question for statement 3", 8],
question4 : ["This is a question for statement 4 This is a question for statement 4", 8],
question5 : ["This is a question for statement 5 This is a question for statement 5", 8],
question6 : ["This is a question for statement 6 This is a question for statement 6", 8],
question7 : ["This is a question for statement 7 This is a question for statement 7", 8],
question8 : ["This is a question for statement 8 This is a question for statement 8", 8]

}
var canvas = $("canvas")[0];
var ctx = canvas.getContext("2d");

var count0 = 0;
var count1 = 1;
for(var question in questions){
var i = Object.keys(questions).indexOf(question);
var a = i - 1;

ctx.fillStyle = "green";
if( i % 2 == 0 && i == 0){
ctx.fillRect(0, (i * 1) * 200, 200, 200)
}else if(i % 2 == 0 && i !== 0){
count0++
// console.log("count", count0)
ctx.fillRect(0, (i * 1) * 210 - (200 *count0), 200, 200)
}else if(i % 2 == 1 && i == 1){
ctx.fillRect(210, 0 * 200, 200, 200)
}

else if(i % 2 == 1 && i !== 1){
count1++
// console.log("count", count1)
ctx.fillRect(210, (i * 1) * 207 - (200 *count1), 200, 200)
// ctx.fillRect(210, ())
}


}


})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<canvas id "myCanvas" width = "700px" height = "1000px"></canvas>




Answer

I don't have the patience to figure out what exactly is going wrong with your code (although I would guess that multiplying by 210 in one column and 207 in the other is a big part of the problem), because it seems to me that you can get the desired result with much simpler code:

$(function() {
  var questions = {
    question1: ["This is a question for statement 1 This is a question for statement 1", 7],
    question2: ["This is a question for statement 2 This is a question for statement 2", 3],
    question3: ["This is a question for statement 3 This is a question for statement 3", 8],
    question4: ["This is a question for statement 4 This is a question for statement 4", 8],
    question5: ["This is a question for statement 5 This is a question for statement 5", 8],
    question6: ["This is a question for statement 6 This is a question for statement 6", 8],
    question7: ["This is a question for statement 7 This is a question for statement 7", 8],
    question8: ["This is a question for statement 8 This is a question for statement 8", 8]
  }
  var canvas = $("canvas")[0];
  var ctx = canvas.getContext("2d");
  ctx.font = "20px serif";
  
  Object.keys(questions).forEach(function(question, i) {
    var offset = i % 2;
    ctx.fillStyle = "green";
    ctx.fillRect(210 * offset, (i - offset) / 2 * 210, 200, 200);
    // next two lines optional:
    ctx.fillStyle = "white";
    ctx.fillText(question, 210 * offset + 30, (i - offset) / 2 * 210 + 60);
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<canvas id "myCanvas" width="700px" height="1000px"></canvas>