Drawing in canvas


Hi, I script in FileMaker and need to utilize a small javascript to draw objects. I got help from the FileMaker forum how to draw 100 objects, but I need to only draw 28 based off of a “IF” statement for a variable k. Anyway, when I use the “IF” statement all objects don’t draw and when I remove the “IF” statement all 100 objects draw. I’ve tried numerous attempt to include W3School but to no avail.

Please see attached script, forum will not allow me to post script correctly, so I’ve removed character to try and help with the pasting. I don’t mean to confuse. I just need help with how to control the boxes/squares being drawn.



canvas id='canvas' width=510 height=510 style='border:1px solid #c3c3c3;


var canvas = document.getElementById('canvas');

var ctx = canvas.getContext('2d');

ctx.fillStyle = 'silver';

for (var i = 0; i < 10; i++) {

for (var j = 0; j < 10; j++) {

for (var k = 0; k < 28; k++) {

var x = 5 + j * 50;

var y = 5 + i * 50;

If ( var k <= 28 ) {

ctx.fillRect(x, y, 49, 49);









Hi @tomtheriault
When you post code in the forum, you need to format it. To do so you can either select all the code and click the </> button, or type 3 backticks ``` on a separate line both before and after the code block.



Thank you …