<canvas id="myCanvas" width="300" height="300" style="border:1px solid #d3d3d3;"></canvas> <!--Canva startup--> <script> // Setup values var height = 300; var width = 300; var zoomFactor = 15; // -------- var c = document.getElementById("myCanvas"); var xZero = width / 2; var yZero = height / 2; var ctx = c.getContext("2d"); // Draw Cord-System-Grid ctx.beginPath(); ctx.moveTo(xZero, 0); ctx.lineTo(xZero, height); ctx.strokeStyle = "#000000"; ctx.stroke(); ctx.moveTo(0, yZero); ctx.lineTo(width, yZero); ctx.strokeStyle = "#000000"; ctx.stroke(); ctx.beginPath(); // Draw Numbers ctx.font = "10px Georgia"; var heightTextX = yZero + 10; for(var i = 0; i < width; i = i + width / 10) { var numberX = (-1 * xZero / zoomFactor) + i / zoomFactor; ctx.fillText(numberX, i, heightTextX); } var heightTextY = yZero + 10; for(var n = 0; n < height; n = n + height / 10) { var numberY = (-1 * yZero / zoomFactor) + n / zoomFactor; if(numberY !== 0) ctx.fillText(numberY * -1, heightTextY, n); } </script>
var
This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)