//Graph maker library, dependencies Canvas maker var CanvasMaker = (function() { var W = window.innerWidth; var H = window.innerHeight; var canvasCount = 0; var zIndexVar = 100; var basicOverlayCSS = { position: "absolute", background: "transparent", zIndex: "100", left: "0", top: "0", bottom: "auto", right: "auto", width: W, height: H }; var baseContext = { fillStyle: "lime", strokeStyle: "black", globalAlpha: 1.0, // default 1.0 lineWidth: 1.2, // default is 1.0 lineCap: "butt", // butt(default)| round | square lineJoin: "miter", // miter(default) | round | bevel miterLimit: 10.0, // 10.0 is default font: "14px monospace", // default "10px sans-serif" }; var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame || function(f) { return setTimeout(f, 1000 / 60) } // simulate calling code 60 ; var cancelAnimationFrame = window.cancelAnimationFrame || window.mozCancelAnimationFrame || function(requestID) { clearTimeout(requestID) }; //fall back; var getCanvasCount = function() { return canvasCount; } var Canvas = function(id, canvasCSS, parent) { zIndexVar++; this.id = (id && typeof id === "string") ? id : "canvas" + zIndexVar; if (document.getElementById(id)) { console.error("Error: A DOM element already exists with a same id: " + id); zIndexVar--; return 0; } this.canvas = document.createElement('canvas'); if (!this.canvas.getContext) { console.error("Error: Your browser does not support Canvas 2D context"); return 0; } canvasCount++; //over write the custom CSS over basic CSS if any and apply zIndex too this.parent = parent || document.body; this.canvasCSS = Object.assign({}, basicOverlayCSS, { zIndex: zIndexVar }, canvasCSS ); this.canvas.setAttribute("id", this.id); parent.appendChild(this.canvas); this.ctx = this.canvas.getContext('2d'); CSS.applyStyles(this.canvas, this.canvasCSS); this.canvas.width = this.canvasCSS.width; this.canvas.height = this.canvasCSS.height; window.addEventListener('resize', function(){ }); }; Canvas.prototype.removeCanvas = function() { canvasCount--; document.body.removeChild(document.getElementById(this.id)); } return { Canvas: Canvas, getCanvasCount: getCanvasCount, startAnimation: requestAnimationFrame, endAnimation: cancelAnimationFrame } })(); var CSS = (function() { var applyStyles = function(element, styleObject) { for (i in styleObject) { element.style[i] = styleObject[i]; } }; return { applyStyles: applyStyles } })(); var GraphMaker = (function() { var mode = "point" // point, shape var unitLen = 30; var coordinates = []; var W = window.innerWidth; var H = window.innerHeight; var unitLen = 30; var c; var config = { height: H, width: W, leftOffset:0, topOffset:0, screenWidth: window.innerWidth, screenHeight: window.innerHeight }; function init(parent, customConfig) { customConfig = Object.assign({}, config, customConfig) var myCanvas = new CanvasMaker.Canvas("cartesianPlane", { background: "linen", zIndex: "0", position: "static", width: customConfig.width, height: customConfig.height }, parent); config = Object.assign({}, config, customConfig); c = myCanvas.ctx; c.textAlign = "center"; c.textBaseline = "middle"; W = customConfig.width; H = customConfig.height; config.leftOffset = (config.screenWidth - customConfig.width) / 2; config.topOffset = (config.screenHeight - customConfig.height) / 2; // console.log(`${config.leftOffset} ${config.topOffset}`); initGraph(unitLen); myCanvas.canvas .addEventListener("touchstart", touchstartHandle, false); myCanvas.canvas .addEventListener("click", touchstartHandle, false); } function initGraph(unitLen) { coordinates = []; deleteSpanText("width-text"); c.clearRect(0, 0, W, H); c.font = "15px monospace"; c.strokeStyle = "black"; c.setLineDash([0, 0]); c.fillText("O", W / 2 + 10, H / 2 + 10); c.fillText("X", W - 20, H / 2 + 10); c.fillText("Y", W / 2 + 10, 0 + 20); c.lineWidth = 2; c.strokeStyle = "brown"; c.fillStyle = "brown"; var tw = 10; function arrowTriangle(x1, y1, x2, y2, x3, y3) { c.moveTo(x1, y1); c.lineTo(x2, y2); c.lineTo(x3, y3); c.fill(); } arrowTriangle(W / 2, 0, W / 2 + tw, 0 + tw, W / 2 - tw, 0 + tw); arrowTriangle(W / 2, H, W / 2 + tw, H - tw, W / 2 - tw, H - tw); arrowTriangle(0, H / 2, 0 + tw, H / 2 + tw, 0 + tw, H / 2 - tw); arrowTriangle(W, H / 2, W - tw, H / 2 + tw, W - tw, H / 2 - tw); c.beginPath(); c.moveTo(W / 2, 0); c.lineTo(W / 2, H); c.moveTo(0, H / 2); c.lineTo(W, H / 2); c.stroke(); c.closePath(); c.lineWidth = 1; c.setLineDash([2, 2]); c.beginPath(); for (let i = W / 2; i < W; i += unitLen) { c.moveTo(W - i, 0); c.lineTo(W - i, H); c.moveTo(i, 0); c.lineTo(i, H); // c.stroke(); } for (let i = H / 2; i < H; i += unitLen) { c.moveTo(0, H - i); c.lineTo(W, H - i); c.moveTo(0, i); c.lineTo(W, i); // c.stroke(); } c.stroke(); c.closePath(); } function touchstartHandle(evt) { evt.preventDefault(); var x = Math.round(evt.clientX); var y = Math.round(evt.clientY); if (evt.changedTouches) { x = Math.round(evt.changedTouches[0].pageX); y = Math.round(evt.changedTouches[0].pageY); } x -= config.leftOffset || 0; y -= config.topOffset || 0; plotPoint(x, y); coordinates.push({ x, y }); if (coordinates.length % 2 == 0 && coordinates.length > 1) { plotLine( coordinates[coordinates.length - 2].x, coordinates[coordinates.length - 2].y, coordinates[coordinates.length - 1].x, coordinates[coordinates.length - 1].y ); } } function plotLine(x1, y1, x2, y2) { // console.log(`x1:${x1}, y1:${y1}, x2:${x2}, y2:${y2}`); var distance = Math.round(Math.hypot(x2 - x1, y2 - y1)); var midX = x1 < x2 ? x1 + (x2 - x1) / 2 : x2 + (x1 - x2) / 2; var midY = y1 < y2 ? y1 + (y2 - y1) / 2 : y2 + (y1 - y2) / 2; var angle = Math.atan2(y2 - y1, x2 - x1); if (angle <= -0.5 * Math.PI || angle >= 0.5 * Math.PI) { angle += Math.PI; } c.lineWidth = 1; c.strokeStyle = "black"; c.setLineDash([4, 2]); c.beginPath(); c.moveTo(x1, y1); c.lineTo(x2, y2); c.stroke(); c.closePath(); createSpanText( `${distance}px`, 11, "red", midX, midY, `${Math.round(angle * 180/Math.PI)}deg` ); } function plotPoint(x, y) { var offsetX = 10; var offsetY = 10; var plotValueX = x - W / 2; var plotValueY = -(y - H / 2); if (x < W / 2 && y < H / 2) { offsetX = 0; offsetY = -10; } else if (x > W / 2 && y < H / 2) { offsetX = 0; offsetY = -10; } else if (x < W / 2 && y > H / 2) { offsetX = 0; offsetY = 10; } else if (x > W / 2 && y > H / 2) { offsetX = 0; offsetY = 10; } c.fillStyle = "black"; c.beginPath(); c.arc(x, y, 3, 0, Math.PI * 2, false); c.fill(); createSpanText( `(${plotValueX},${plotValueY})`, 9, "black", x + offsetX, y + offsetY ); } function $(id) { if (id === undefined) { throw "Undefined args in $()"; } return document.getElementById(id); } function createSpanText(text, size, color, x, y, angle) { var x = Math.round(x); var y = Math.round(y); var span = document.createElement("SPAN"); var text = document.createTextNode(text); span.setAttribute("class", "width-text"); span.appendChild(text); document.body.appendChild(span); CSS.applyStyles(span, { top: "" + (y + config.topOffset) + "px", left: "" + (x + config.leftOffset) + "px", fontSize: "" + size + "px", lineHeight: "" + size + "px", fontWeight: "900", color: color, transform: `rotate(${angle})` }); } function deleteSpanText(className) { var spanList = document.querySelectorAll('.' + className); for (var i = 0; i < spanList.length; i++) { document.body.removeChild(spanList[i]); } } return { init, initGraph } })();

Cartesian Plotter [ canvas ]