Gantt Chart Timeline Pixels

Question

Hello I have been trying to figure something out for a couple days, I'm hoping someone may be able to shed some light on the situation.

I've been trying to code out a learning project. The goal is basically a gantt chart where I'd like to plot some events on eventually.

I am drawing out the timeline on a canvas, right now I have the "Seconds" lines being drawn 50px apart, with 4 shorter lines between them representing 200ms spaces. enter code here

 var aTime = "00:1:00.0"; var h, m, s, ms, totalSeconds, thecanvas = null; // within the loop at line 76 I'm trying ( i * secondsSpacing ) to get the X //position to draw the lines for each second. //Why would this not drawing the lines 50 pixels apart? var secondsSpaceing = 50; var spaceTime = 44; var mousePositioning = { x:0, y:0}; var zoom1a = 1; function drawStroke(sX, sY, eX, eY, color) { thecontext.strokeStyle=color; thecontext.lineWidth=1; thecontext.beginPath(); thecontext.moveTo(sX,sY); thecontext.lineTo(eX,eY); thecontext.stroke(); } function secToMinSec(seconds) { var min = Math.floor(seconds / 60); var sec = Math.ceil(seconds % 60); sec = (sec < 10) ? "0" + sec : sec; return new Array(min, sec); } var mouseXY = function(eve) { if(!eve) var eve = window.event; var totalOffsetX = 0; var totalOffsetY = 0; var canvasX = 0; var canvasY = 0; var canvas = this; do{ totalOffsetX += canvas.offsetLeft; totalOffsetY += canvas.offsetTop; } while(canvas = canvas.offsetParent) canvasX = eve.pageX - totalOffsetX; canvasY = eve.pageY - totalOffsetY; return {'x':canvasX, 'y':canvasY} } $(document).ready(function() { thecanvas = document.getElementById("thecanvas"); thecontext = thecanvas.getContext("2d"); HTMLCanvasElement.prototype.xy = mouseXY; $(thecanvas).mousemove(function(e) { mousePositioning = thecanvas.xy(e); $("#output").html( "X = " + mousePositioning.x + "<br> Y = " + mousePositioning.y ); }); var splitTimeStrMS = aTime.split('.'); var splitTimeStr = splitTimeStrMS[0].split(':'); h = parseInt(splitTimeStr[0]); m = parseInt(splitTimeStr[1]); s = parseInt(splitTimeStr[2]); ms = parseFloat(splitTimeStrMS[1]); var X = 60; totalSeconds = (h * X * X) + (m * X) + s; var divided = Math.ceil(totalSeconds / zoom1a); var timeChartArray = new Array(); for(var i = 0; i <= divided; i++) { timeChartArray.push(i * zoom1a); } var neededCanvasWidth = Math.ceil(timeChartArray.length * secondsSpaceing); var timeStr = null; var lineColor = "#000000"; if(neededCanvasWidth > ($("#thecanvas").attr("width"))) { $("#thecanvas").attr("width", neededCanvasWidth); thecontext.font="normal 12px Arial"; thecontext.fillStyle = lineColor; for(var i = 0; i < timeChartArray.length; i++) { //draw the line var xline = parseFloat(i * secondsSpaceing); drawStroke(xline, 0, xline, 8, lineColor); //draw the time text var timeStr = secToMinSec( timeChartArray[i] ); var timeFormatted = timeStr[0] + ":" + timeStr[1]; var timeXpos = (xline - 10); if(timeFormatted != "0:00") { thecontext.fillText(timeFormatted, timeXpos,24); } } } }); 

 #canvasOut {position:relative; width:100%; width:700px; background:#222222; overflow:visible; } #thecanvas {position:relative; height:140px; background:#fff; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> <div id="canvasOut"> <canvas width="200" id="thecanvas"></canvas> </div> <div id="output"> </div> <div id="output2"> </div> 

If you move the mouse over the one second mark, you will see it is at x:50, two second mark is x:100 but then the three second mark is x:149, the same pattern continues and I keep losing seconds. By the fifth second, it should be at x:250 but its lost two seconds and is x:248. I'm still trying to figure this out myself but hopeful someone can shed some light as it's becoming discouraging. Thanks for reading.

EDIT : the code snippet worked in the editor, but I noticed when I press the "Run snippet" button that it's not showing the mouse position as it did in the editor, and on jsFiddle.

Here is a link to the project on jsFiddle:

https://jsfiddle.net/4y0q2pdw/19/

Thanks again

Answer 1

Check this.I saw that every 1 sec the function subtracted 4px. So I replace the

var xline = parseFloat(i * secondsSpaceing);

with the

 var xline =parseFloat((i * secondsSpaceing)+3.6*i);

Initially I set instead of 3.6 the integer 4 but the function added then 1 or 2px after the 8 seconds line.So to be more accurate I replace the 4 by 3.6 that is more accurate.