{"id":796,"date":"2024-05-17T11:51:15","date_gmt":"2024-05-17T08:51:15","guid":{"rendered":"https:\/\/kominikee.com\/?page_id=796"},"modified":"2024-05-17T17:33:29","modified_gmt":"2024-05-17T14:33:29","slug":"infinite-canvas","status":"publish","type":"page","link":"https:\/\/kominikee.com\/en\/infinite-canvas\/","title":{"rendered":"Infinite Canvas"},"content":{"rendered":"<div data-elementor-type=\"wp-page\" data-elementor-id=\"796\" class=\"elementor elementor-796\" data-elementor-post-type=\"page\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-3dd4035 elementor-section-full_width elementor-section-height-full elementor-section-stretched elementor-section-height-default elementor-section-items-middle\" data-id=\"3dd4035\" data-element_type=\"section\" data-settings=\"{&quot;stretch_section&quot;:&quot;section-stretched&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-38a26a8\" data-id=\"38a26a8\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-b55a8bb elementor-widget elementor-widget-html\" data-id=\"b55a8bb\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<style>\n    body, html {\n        margin: 0;\n        padding: 0;\n        overflow: hidden;\n    }\n    #infiniteCanvas {\n        display: block;\n        cursor: crosshair;\n    }\n    #controls {\n        position: absolute;\n        top: 10px;\n        left: 10px;\n        z-index: 10;\n        background: rgba(255, 255, 255, 0.8);\n        padding: 10px;\n        border-radius: 8px;\n        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);\n    }\n    #controls label {\n        display: block;\n        margin-bottom: 5px;\n        font-weight: bold;\n    }\n    .control-group {\n        margin-bottom: 20px;\n        padding: 10px;\n        border: 1px solid #ddd;\n        border-radius: 8px;\n    }\n    #exportBtn {\n        display: block;\n        margin-top: 10px;\n        padding: 10px;\n        background: #0073e6;\n        color: white;\n        border: none;\n        border-radius: 8px;\n        cursor: pointer;\n        text-align: center;\n    }\n    #exportBtn:hover {\n        background: #005bb5;\n    }\n<\/style>\n\n<div id=\"controls\">\n    <div class=\"control-group\">\n        <label for=\"colorPicker\">Choose Color<\/label>\n        <input type=\"color\" id=\"colorPicker\" value=\"#000000\">\n    <\/div>\n    <div class=\"control-group\">\n        <label for=\"brushSize\">Choose Pen<\/label>\n        <input type=\"range\" id=\"brushSize\" min=\"1\" max=\"50\" value=\"5\">\n    <\/div>\n    <div class=\"control-group\">\n        <label for=\"brushType\">Choose Brush Type<\/label>\n        <select id=\"brushType\">\n            <option value=\"round\">Round<\/option>\n            <option value=\"square\">Square<\/option>\n            <option value=\"triangle\">Triangle<\/option>\n        <\/select>\n    <\/div>\n    <div class=\"control-group\">\n        <label>Export Image<\/label>\n        <button id=\"exportBtn\">Export as PNG<\/button>\n    <\/div>\n<\/div>\n\n<canvas id=\"infiniteCanvas\"><\/canvas>\n\n<script>\n    document.addEventListener(\"DOMContentLoaded\", function() {\n        const canvas = document.getElementById('infiniteCanvas');\n        const ctx = canvas.getContext('2d');\n        const colorPicker = document.getElementById('colorPicker');\n        const brushSize = document.getElementById('brushSize');\n        const brushType = document.getElementById('brushType');\n        const exportBtn = document.getElementById('exportBtn');\n\n        let isDrawing = false;\n        let lastX = 0;\n        let lastY = 0;\n        let offsetX = 0;\n        let offsetY = 0;\n        let zoom = 1;\n        let color = '#000000';\n        let lineWidth = 5;\n        let currentBrushType = 'round';\n\n        function resizeCanvas() {\n            canvas.width = window.innerWidth;\n            canvas.height = window.innerHeight;\n        }\n\n        resizeCanvas();\n        window.addEventListener('resize', resizeCanvas);\n\n        colorPicker.addEventListener('change', (e) => {\n            color = e.target.value;\n            ctx.strokeStyle = color;\n        });\n\n        brushSize.addEventListener('input', (e) => {\n            lineWidth = e.target.value;\n            ctx.lineWidth = lineWidth;\n        });\n\n        brushType.addEventListener('change', (e) => {\n            currentBrushType = e.target.value;\n            ctx.lineCap = currentBrushType; \/\/ Change brush type\n            \/\/ Custom shapes can be added with additional code\n        });\n\n        canvas.addEventListener('mousedown', (e) => {\n            isDrawing = true;\n            lastX = e.offsetX;\n            lastY = e.offsetY;\n        });\n\n        canvas.addEventListener('mousemove', (e) => {\n            if (!isDrawing) return;\n            ctx.beginPath();\n            ctx.moveTo(lastX - offsetX, lastY - offsetY);\n            ctx.lineTo(e.offsetX - offsetX, e.offsetY - offsetY);\n            ctx.stroke();\n            [lastX, lastY] = [e.offsetX, e.offsetY];\n        });\n\n        canvas.addEventListener('mouseup', () => isDrawing = false);\n        canvas.addEventListener('mouseout', () => isDrawing = false);\n\n        canvas.addEventListener('wheel', (e) => {\n            e.preventDefault();\n            const zoomSpeed = 0.1;\n            if (e.deltaY < 0) {\n                zoom *= (1 + zoomSpeed);\n            } else {\n                zoom *= (1 - zoomSpeed);\n            }\n            ctx.setTransform(zoom, 0, 0, zoom, offsetX, offsetY);\n        });\n\n        canvas.addEventListener('contextmenu', (e) => {\n            e.preventDefault();\n            offsetX += e.movementX;\n            offsetY += e.movementY;\n            ctx.setTransform(zoom, 0, 0, zoom, offsetX, offsetY);\n        });\n\n        exportBtn.addEventListener('click', () => {\n            const link = document.createElement('a');\n            link.download = 'canvas-image.png';\n            link.href = canvas.toDataURL();\n            link.click();\n        });\n\n        \/\/ Ba\u015flang\u0131\u00e7 rengi ve \u00e7izgi kal\u0131nl\u0131\u011f\u0131\n        ctx.strokeStyle = color;\n        ctx.lineWidth = lineWidth;\n        ctx.lineCap = currentBrushType;\n    });\n<\/script>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>Choose Color Choose Pen Choose Brush Type RoundSquareTriangle Export Image Export as PNG<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"page-builder","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-796","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/kominikee.com\/en\/wp-json\/wp\/v2\/pages\/796","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kominikee.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/kominikee.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/kominikee.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/kominikee.com\/en\/wp-json\/wp\/v2\/comments?post=796"}],"version-history":[{"count":37,"href":"https:\/\/kominikee.com\/en\/wp-json\/wp\/v2\/pages\/796\/revisions"}],"predecessor-version":[{"id":833,"href":"https:\/\/kominikee.com\/en\/wp-json\/wp\/v2\/pages\/796\/revisions\/833"}],"wp:attachment":[{"href":"https:\/\/kominikee.com\/en\/wp-json\/wp\/v2\/media?parent=796"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}