Unlasteelonnare
New Member
I m trying to implement the horrizontal scrolling on an asp.net page with HTML5 canvas.I m representing a patient's health information graphically on this canvas.
Issues :- Scrolling does work, however the canvas elements get distorted when scrolling starts to go beyond the displayed page. Also, the labels on the y-axis are not constant while scrolling happens(i.e. once i start scrolling, the y axis labels get distorted and do'not appear on the scrolled part of the canvas). If anyone could run this code with javascript editor and get back to me with a solution, I would greatly appreciate that.\[code\] <Canvas id="myCanvas" width="930" height="900"style="border:4px double #000000;"></canvas> <script type ="text/javascript"> // defining the canvas element var can = document.getElementById("myCanvas"); var ctx = can.getContext("2d"); dragging = false, translated = 0; lastX = 0, /*ctx.scale(1, -1); ctx.translate(0, -900);*/ // when mouse is clicked on canvas can.onmousedown = function (e) { var evt = e || event; dragging = true; lastX = evt.offsetX; } // when mouse is clicked again and the canvas is deselected window.onmouseup = function () { dragging = false; } window.onmousemove = function (e) { var evt = e || event; if (dragging) { var delta = evt.offsetX - lastX; translated += delta; ctx.translate(delta, 0); lastX = evt.offsetX; timeline(); } } // Function that draws the timeline on the xy grid along with data points. function timeline(){ // fill canvas color ctx.fillStyle = 'black'; ctx.fillRect(0, 0, 930, 900); // x axis ctx.strokeStyle = 'orange'; ctx.moveTo(50, 500); ctx.lineTo(930, 500); ctx.stroke(); // y axis ctx.moveTo(65, 900); ctx.lineTo(65, 45); ctx.stroke(); // y-co-ordinate texts - Home, Office, Emergency, etc... ctx.strokeStyle = "White"; ctx.font = "10px Verdana"; ctx.strokeText("Home", 00, 510); ctx.strokeStyle = "White"; ctx.font = "10px Verdana"; ctx.strokeText("Office", 00, 460); ctx.strokeStyle = "White"; ctx.font = "10px Verdana"; ctx.strokeText("Emergency", 00, 410); ctx.strokeStyle = "White"; ctx.font = "10px Verdana"; ctx.strokeText("Foster Home", 00, 360); ctx.strokeStyle = "White"; ctx.font = "10px Verdana"; ctx.strokeText("SNF", 00, 310); ctx.strokeStyle = "White"; ctx.font = "10px Verdana"; ctx.strokeText("LTC", 00, 260); ctx.strokeStyle = "White"; ctx.font = "10px Verdana"; ctx.strokeText("Drug/Rehab", 00, 210); ctx.strokeStyle = "White"; ctx.font = "10px Verdana"; ctx.strokeText("Hospital", 00, 160); ctx.strokeStyle = "White"; ctx.font = "10px Verdana"; ctx.strokeText("Hospice", 00, 110); ctx.strokeStyle = "White"; ctx.font = "10px Verdana"; ctx.strokeText("ANP Exams", 00, 540); ctx.strokeStyle = "White"; ctx.font = "10px Verdana"; ctx.strokeText("Life Event", 00, 560); ctx.strokeStyle = "White"; ctx.font = "10px Verdana"; ctx.strokeText("Care Plan", 00, 610); // x grid - 9 health events (Home, Office, Emergency, etc..) ctx.strokeStyle = 'orange'; ctx.moveTo(50, 450); ctx.lineTo(930, 450); ctx.stroke(); ctx.moveTo(50, 400); ctx.lineTo(930, 400); ctx.stroke(); ctx.moveTo(50, 350); ctx.lineTo(930, 350); ctx.stroke(); ctx.moveTo(50, 300); ctx.lineTo(930, 300); ctx.stroke(); ctx.moveTo(50, 250); ctx.lineTo(930, 250); ctx.stroke(); ctx.moveTo(50, 200); ctx.lineTo(930, 200); ctx.stroke(); ctx.moveTo(50, 150); ctx.lineTo(930, 150); ctx.stroke(); ctx.moveTo(50, 100); ctx.lineTo(930, 100); ctx.stroke(); ctx.moveTo(65, 600); ctx.lineTo(930, 600); ctx.stroke(); // y grid - 12 months ctx.moveTo(137, 900); ctx.lineTo(137, 50); ctx.stroke(); ctx.moveTo(209, 900); ctx.lineTo(209, 50); ctx.stroke(); ctx.moveTo(281, 900); ctx.lineTo(281, 50); ctx.stroke(); ctx.moveTo(353, 900); ctx.lineTo(353, 50); ctx.stroke(); ctx.moveTo(425, 900); ctx.lineTo(425, 50); ctx.stroke(); ctx.moveTo(497, 900); ctx.lineTo(497, 50); ctx.stroke(); ctx.moveTo(569, 900); ctx.lineTo(569, 50); ctx.stroke(); ctx.moveTo(641, 900); ctx.lineTo(641, 50); ctx.stroke(); ctx.moveTo(713, 900); ctx.lineTo(713, 50); ctx.stroke(); ctx.moveTo(785, 900); ctx.lineTo(785, 50); ctx.stroke(); ctx.moveTo(857, 900); ctx.lineTo(857, 50); ctx.stroke(); ctx.moveTo(929, 900); ctx.lineTo(929, 50); ctx.stroke(); // -------------------------------------------------------------- // // Testing the functions - circle and triangle and health_plans. // // -------------------------------------------------------------- // // Visit Event draw_circle(137, 300, 5, 'green'); draw_circle(142, 300, 5, 'green'); draw_circle(520, 200, 5, 'navy'); draw_circle(530, 450, 5, 'green'); // Joining the visit with the outcome ctx.moveTo(142, 500); ctx.lineTo(142, 300); ctx.stroke(); ctx.moveTo(520, 500); ctx.lineTo(520, 200); ctx.stroke(); // outcome Event draw_circle(137, 500, 5, 'yellow'); draw_circle(142, 500, 5, 'yellow'); draw_circle(520, 500, 5, 'yellow'); draw_circle(530, 400, 5, 'yellow'); draw_circle(535, 400, 5, 'yellow'); draw_circle(540, 400, 5, 'yellow'); draw_circle(545, 400, 5, 'yellow'); // Care Plan Event draw_circle(281, 600, 8, 'red'); draw_circle(481, 600, 8, 'red'); draw_circle(488, 600, 8, 'red'); // Life Event draw_triangle(381); draw_triangle(481); draw_triangle(485); // Health Care Line draw_health_plans(1, 0, 850, 10); draw_health_plans(2, 0, 350, 22); draw_health_plans(2, 355, (600 - 355), 22); draw_health_plans(2, 0, 350, 680); draw_health_plans(1, 0, 480, 740); // Care Plan Line draw_health_plans(3, 615, 930, 615); } // -------------------------------------------------------------- // // End of TimeLine() // // -------------------------------------------------------------- // // calling the function to draw the timeline on the xy grid. timeline(); // --------------------------------------------------------------------------------------------- // // FUNCTIONS TO PLOT EVENTS // // --------------------------------------------------------------------------------------------- // // function to draw a circle - x,y, radius, color: coordinates, radius and the color of the circle. function draw_circle(x, y, radius, color) { ctx.beginPath(); ctx.arc(x, y, radius, 0, 2 * Math.PI, false); ctx.fillStyle = color; ctx.fill(); ctx.stroke(); } // function to draw a triangle - x: Life event's x-coordinate on the timeline. function draw_triangle(x) { ctx.fillStyle = 'purple'; ctx.strokeStyle = 'white'; ctx.lineWidth = 1; ctx.beginPath(); ctx.moveTo(x, 560); ctx.lineTo(x + 5, 550); ctx.lineTo(x - 5, 550); ctx.lineTo(x, 560); ctx.fill(); ctx.stroke(); ctx.closePath(); } // draw the health care plans on the graph - color: The color combination for the health plan. function draw_health_plans(num, range1, range2, y_co) { ctx.strokeStyle = 'white'; // border color ctx.lineWidth = 2; // Draw rectangle. if (num == 1) { // color corresponding to health plan ctx.fillStyle = 'green'; // (x,y,width,height) ctx.fillRect(range1, y_co, range2, 10); } else if (num == 2) { // color corresponding to health plan ctx.fillStyle = 'navy'; // (x,y,width,height) ctx.fillRect(range1, y_co, range2, 10); } else if (num == 3) { // color corresponding to Care Plan ctx.fillStyle = 'red'; ctx.fillRect(range1, y_co, range2, 10); } } // --------------------------------------------------------------------------------------------- // // END OF PLOTTING FUNCTIONS // // --------------------------------------------------------------------------------------------- // </script> \[/code\]Here is my code is jsfiddle.net www.jsfiddle.net/WNpKE I created a canvas. I created an x-y grid from scratch using line strokes. This is my first time working with canvas. so everything I have done is very basic and created from scratch. Drawing circles, triangles are all created using helper functions. They represent specific events in the x-y grid. If client clicks on canvas (mouse down), it triggers scrollability to be true. once, true, you can drag the screen/canvas to scroll horrizontally. Next click, will turn scrollability to false again. I am trying to translate the grid with my onmousemove function. This is the confusing part. I don't have a very good grip on this part. Can someone please help me understand ? Currently Scrolling works. However all the elements, get distorted.I would like some help on how to have event points on my canvas, and then when scrolling starts to happen, new points are displayed while maintaining the labelling on the y-axis and the x-axis. Currently the labelling gets distorted and so does the grid.