javascript - JavaScriptキャンバスに描かれた長方形は重なり続けます

Question

キャンバスのコンテキストでfillRectとstrokeRectを使用して長方形の束をペイントすることにより、JavaScriptで単純なGUIインターフェイスを作成しようとしています。長方形のサイズを把握するために、ブラウザウィンドウで使用可能なスペースを取得し、すべての長方形の座標を計算する式があります。奇妙なことに、座標が交差していなくても（座標値を出力して確認しました）、長方形は交差しています。コードは次のとおりです。

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

var w; 
var h;
var sectionH;
var sectionW;
var sectionX;
var noOfSections;
var gap;
var sectionColor;
var firstY;

//separate sections to follow:
//sessions
var sessionsStartY;
var sessionsEndY;

//activities values
var activitiesStartY;
var activitiesEndY;

//schools values
var schoolsStartY;
var schoolsEndY;

//data entry values
var daenStartY;
var daenEndY;

//general value setup
function generalSetUp() {

    noOfSections = 4;

    ctx.canvas.width = window.innerWidth - 15;
    ctx.canvas.height = window.innerHeight + 500;

    //section edge color and width
    ctx.strokeStyle = "white";
    ctx.lineWidth = 1;

    w = $("#canvas").width();
    h = $("#canvas").height();

    //gap between the sections should vary depending on screen size, 
    //one percent of the whole screen height should do
    //we want the numbers nice and round, hence parseInt
    gap = 15;
    sectionX = 5;
    firstY = 5;
    sectionColor = "rgba(240, 237, 238, 0.5)";

    //we want to fit all the sections on the screen without scrolling, so a bit of calculation is needed to get the
    //height of the section: total height minus top gap, minus bottom gap, minus all the gaps between the sections
    //divided by the total number of sections should give us the height of every section        
    sectionH = ((((h - firstY) - firstY) - (gap * (noOfSections-1))) / noOfSections);
    sectionH = parseInt(sectionH);
    //total available width minus left gap and right gap
    sectionW = ((w - sectionX) - sectionX);
    sectionW = parseInt(sectionW);

    titleFont = gap + 18 + "px Calibri";
    buttonFont = gap + 12 + "px Calibri";
}

//setup for values representing positions of each section
function sectionsSetUp() {
    //section values
    sessionsStartY = firstY;
    sessionsEndY = sessionsStartY + sectionH;

    //activities values
    activitiesStartY = sessionsEndY + gap;
    activitiesEndY = activitiesStartY + sectionH;

    //schools values
    schoolsStartY = activitiesEndY + gap;
    schoolsEndY = schoolsStartY + sectionH;

    //data entry values
    daenStartY = schoolsEndY + gap;
    daenEndY = daenStartY + sectionH;
}

そして、平均的な断面図のコードは次のようになります。

//drawing each session: 
function createSessionsSection(sStartX, sStartY, sEndX, sEndY) {
    ctx.fillStyle=sectionColor;
    ctx.strokeStyle = "white";
    ctx.fillRect(sStartX, sStartY, sEndX, sEndY);
    ctx.strokeRect(sStartX, sStartY, sEndX, sEndY);
}

何が起こるかというと、最初のブロックと2番目のブロックの間のギャップは15で、2番目のギャップは0で、3番目は-15のように見えます。また、fillRectsでもいくつかの重複が発生しています。何が原因なのかわかりません。スクリーンショットは次のとおりです。