{"id":8754,"date":"2024-09-12T13:00:28","date_gmt":"2024-09-12T13:00:28","guid":{"rendered":"https:\/\/www.splashlearn.com\/tools\/?page_id=8754"},"modified":"2024-09-12T13:11:39","modified_gmt":"2024-09-12T13:11:39","slug":"graph-drawing","status":"publish","type":"page","link":"https:\/\/www.splashlearn.com\/tools\/graph-drawing","title":{"rendered":"Graph Drawing Teaching Tool"},"content":{"rendered":"\n<p>Boost your math lessons with our free graph drawing tool! It offers a virtual grid, a multi-color free-hand pencil, a feature to draw straight lines, eraser, and clear button. Use this canvas for modeling a wide range of math concepts\u2014number relationships, counting, addition, subtraction, arrays, and much more. It&#8217;s an ideal math graphing tool for teachers that makes visualizing abstract concepts easy in the classroom. Simplify teaching and engage your students with this versatile tool!<\/p><div class=\"signup-signin-buttons\"><div class=\"signup-button-left\"><a href=\"https:\/\/www.splashlearn.com\/parents\/register#!\/parent\/creation\">Parents, Sign Up for Free<\/a><\/div><div class=\"signin-button-right\"><a href=\"https:\/\/www.splashlearn.com\/teachers\/register\">Teachers, Use for Free<\/a><\/div><\/div>\n\n\n\n    <style>\n        .drawing-tool-container {\n            display: flex;\n            align-items: center;\n            margin: 0;\n            padding: 0;\n            box-sizing: border-box;\n        }\n\n        .graph-main-container {\n            display: flex;\n            flex-direction: column;\n            align-items: center;\n            width: 90%;\n            max-width: 800px;\n            padding: 20px;\n            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2), 0 6px 20px rgba(0, 0, 0, 0.19);\n            border-radius: 10px;\n            overflow: hidden;\n        }\n\n        .graph-main-container:hover {\n            box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.4);\n        }\n\n        #canvasContainer {\n            width: 600px;\n            height: 400px;\n            position: relative;\n            border: 1px solid #ccc;\n            margin: 0 auto;\n        }\n\n        #gridCanvas, #drawingCanvas {\n            position: absolute;\n            top: 0;\n            left: 0;\n            width: 100%;\n            height: 100%;\n        }\n\n        #toolbar {\n            margin-top: 20px;\n            display: flex;\n            justify-content: center;\n            width: 100%;\n        }\n\n        #toolbar button {\n            background: none;\n            border: none;\n            margin-right: 10px;\n            cursor: pointer;\n            padding: 5px;\n        }\n\n        #colorSelectorButton {\n            border: 1px solid #000;\n            margin-right: 10px;\n            cursor: pointer;\n            padding: 5px;\n        }\n\n        #toolbar button.active {\n            border-bottom: 3px solid blue;\n        }\n\n        #toolbar img {\n            width: 35px;\n            height: 35px;\n        }\n\n        #colorSelectorButton img {\n            width: 35px;\n            height: 35px;\n            border-radius: 50%;\n            border: 2px solid black;\n        }\n\n        #colorOptions {\n            display: none;\n            top: 45px;\n            background-color: #fff;\n            border: 1px solid #ccc;\n            border-radius: 10px;\n            padding: 10px;\n            z-index: 100;\n        }\n\n        .colorOption {\n            width: 35px;\n            height: 35px;\n            border-radius: 50%;\n            margin: 5px;\n            cursor: pointer;\n        }\n\n        .colorOption.red {\n            background-color: red !important;\n            border: 1px solid #000 !important;\n            border-radius: 50px;\n        }\n\n        .colorOption.green {\n            background-color: green !important;\n            border: 1px solid #000 !important;\n            border-radius: 50px;\n        }\n\n        .colorOption.black{\n            background-color: black !important;\n            border: 1px solid #000 !important;\n            border-radius: 50px;\n        } \n\n        .lineSelector {\n            display: none;\n            top: 45px;\n            background-color: #fff;\n            border: 1px solid #ccc;\n            border-radius: 10px;\n            padding: 10px;\n            z-index: 100;\n        }\n\n        .lineOption {\n            width: 35px;\n            height: 35px;\n            margin: 5px;\n            cursor: pointer;\n        }\n\n        @media (max-width: 600px) {\n            #toolbar img {\n                width: 30px;\n                height: 30px;\n            }\n\n            .graph-main-container {\n                padding: 10px;\n                width: 100%\n            }\n            #colorOptions{\n               text-align: center;\n               width: 50px;\n               margin-right: 10px;\n               padding: 0px;\n               height: 100px;\n            }\n\n            .lineSelector{\n               width: 45px;\n            }\n            .lineOption{\n               width: 30px;\n               height: 30px;\n               margin: 0px;\n            }\n\n            #canvasContainer {\n                width: 100%;\n                height: auto;\n                padding-bottom: 75%;\n            }\n        }\n\n        @media (max-width: 400px) {\n            #toolbar img {\n                width: 25px;\n                height: 25px;\n            }\n\n            #canvasContainer {\n                padding-bottom: 100%;\n            }\n        }\n    <\/style>\n\n    <div class=\"drawing-tool-container\">\n        <div class=\"graph-main-container\">\n            <div id=\"canvasContainer\">\n                <canvas id=\"gridCanvas\"><\/canvas>\n                <canvas id=\"drawingCanvas\"><\/canvas>\n            <\/div>\n\n            <div id=\"toolbar\">\n                <button id=\"pencilButton\">\n                    <img decoding=\"async\" src=\"https:\/\/www.splashlearn.com\/tools\/wp-content\/uploads\/2024\/07\/pencil.png\" alt=\"Pencil\">\n                <\/button>\n                <button id=\"eraserButton\">\n                    <img decoding=\"async\" src=\"https:\/\/www.splashlearn.com\/tools\/wp-content\/uploads\/2024\/07\/eraser.png\" alt=\"Eraser\">\n                <\/button>\n                <button id=\"clearButton\">\n                    <img decoding=\"async\" src=\"https:\/\/www.splashlearn.com\/tools\/wp-content\/uploads\/2024\/07\/trash.png\" alt=\"Trash\">\n                <\/button>\n                \n                <!-- Color selector for Red and Green (initial), Black (default color) appears later -->\n                <button id=\"colorSelectorButton\">\n                    <img decoding=\"async\" src=\"https:\/\/www.splashlearn.com\/tools\/wp-content\/uploads\/2024\/07\/color.svg\" alt=\"Color\">\n                <\/button>\n                <div id=\"colorOptions\">\n                    <button class=\"colorOption red\"><\/button>\n                    <button class=\"colorOption green\"><\/button>\n                    <button class=\"colorOption black\"><\/button> <!-- Default Black color, hidden initially -->\n                <\/div>\n\n                <!-- Line selector for straight and curved lines -->\n                <div id=\"lineSelector\" class=\"lineSelector\">\n                    <button class=\"lineOption\" id=\"straightLineButton\">\n                        <img decoding=\"async\" src=\"https:\/\/www.splashlearn.com\/tools\/wp-content\/uploads\/2024\/09\/straight-line.png\" alt=\"Straight Line\">\n                    <\/button>\n                    <button class=\"lineOption\" id=\"curvedLineButton\">\n                        <img decoding=\"async\" src=\"https:\/\/www.splashlearn.com\/tools\/wp-content\/uploads\/2024\/09\/curve-line.png\" alt=\"Curved Line\">\n                    <\/button>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n","protected":false},"excerpt":{"rendered":"<p>Easily draw models on a graph to visualize and teach various math concepts.<\/p>\n","protected":false},"author":2,"featured_media":8756,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"wj_custom_page.php","meta":{"ub_ctt_via":"","footnotes":""},"class_list":["post-8754","page","type-page","status-publish","has-post-thumbnail"],"aioseo_notices":[],"featured_image_src":"https:\/\/www.splashlearn.com\/tools\/wp-content\/uploads\/2024\/09\/graph-drawing.png","_links":{"self":[{"href":"https:\/\/www.splashlearn.com\/tools\/wp-json\/wp\/v2\/pages\/8754","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.splashlearn.com\/tools\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.splashlearn.com\/tools\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.splashlearn.com\/tools\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.splashlearn.com\/tools\/wp-json\/wp\/v2\/comments?post=8754"}],"version-history":[{"count":2,"href":"https:\/\/www.splashlearn.com\/tools\/wp-json\/wp\/v2\/pages\/8754\/revisions"}],"predecessor-version":[{"id":8758,"href":"https:\/\/www.splashlearn.com\/tools\/wp-json\/wp\/v2\/pages\/8754\/revisions\/8758"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.splashlearn.com\/tools\/wp-json\/wp\/v2\/media\/8756"}],"wp:attachment":[{"href":"https:\/\/www.splashlearn.com\/tools\/wp-json\/wp\/v2\/media?parent=8754"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}