[{"id":188,"created_at":"2024-02-02T08:07:40.430086+00:00","html":"

\r\n \r\n

\r\n

","css":"body {\r\n margin: 0;\r\n padding: 0;\r\n height: 100%;\r\n overflow: hidden;\r\n color: white;\r\n}\r\n\r\nh1 {\r\n background: #7F7FD5;\r\n background: -webkit-linear-gradient(to right, #91EAE4, #86A8E7, #7F7FD5);\r\n background: linear-gradient(to right, #91EAE4, #86A8E7, #7F7FD5);\r\n background-clip: text;\r\n -webkit-background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n}\r\n\r\n.container {\r\n height: 100%;\r\n display: flex;\r\n}\r\n\r\n#toolbar {\r\n display: flex;\r\n flex-direction: column;\r\n padding: 20px;\r\n width: 100px;\r\n background-color: #202020;\r\n}\r\n\r\n#toolbar * {\r\n margin-bottom: 6px;\r\n}\r\n\r\n#toolbar label {\r\n font-size: 12px;\r\n}\r\n\r\n#toolbar input {\r\n width: 100%;\r\n}\r\n\r\n#toolbar button {\r\n background-color: #1565c0;\r\n border: none;\r\n border-radius: 4px;\r\n color: white;\r\n padding: 2px;\r\n}\r\n\r\n#drawing-board {\r\n cursor: url('some-cursor.ico'), default;\r\n}","js":"const canvas = document.getElementById('drawing-board');\r\nconst toolbar = document.getElementById('toolbar');\r\nconst downloadButton = document.getElementById('download');\r\nconst ctx = canvas.getContext('2d');\r\n\r\nconst canvasOffsetX = canvas.offsetLeft;\r\nconst canvasOffsetY = canvas.offsetTop;\r\n\r\ncanvas.width = window.innerWidth - canvasOffsetX;\r\ncanvas.height = window.innerHeight - canvasOffsetY;\r\n\r\nlet isPainting = false;\r\nlet lineWidth = 5;\r\nlet startX;\r\nlet startY;\r\n\r\ntoolbar.addEventListener('click', (e) => {\r\n if (e.target.id === 'clear') {\r\n ctx.clearRect(0, 0, canvas.width, canvas.height);\r\n }\r\n});\r\n\r\ntoolbar.addEventListener('change', (e) => {\r\n if (e.target.id === 'stroke') {\r\n ctx.strokeStyle = e.target.value;\r\n }\r\n\r\n if (e.target.id === 'lineWidth') {\r\n lineWidth = e.target.value;\r\n ctx.lineWidth = lineWidth;\r\n }\r\n});\r\n\r\ncanvas.addEventListener('mousedown', (e) => {\r\n isPainting = true;\r\n startX = e.offsetX;\r\n startY = e.offsetY;\r\n});\r\n\r\ncanvas.addEventListener('mouseup', () => {\r\n isPainting = false;\r\n});\r\n\r\ncanvas.addEventListener('mousemove', (e) => {\r\n if (!isPainting) return;\r\n ctx.beginPath();\r\n ctx.moveTo(startX, startY);\r\n startX = e.offsetX;\r\n startY = e.offsetY;\r\n ctx.lineTo(startX, startY);\r\n ctx.stroke();\r\n});\r\n\r\ndownloadButton.addEventListener('click', () => {\r\n const link = document.createElement('a');\r\n link.href = canvas.toDataURL('image/png');\r\n link.download = 'drawing.png';\r\n link.click();\r\n});\r\n\r\nconst backgroundColorPicker = document.getElementById('backgroundColor');\r\n\r\nbackgroundColorPicker.addEventListener('input', () => {\r\n ctx.fillStyle = backgroundColorPicker.value;\r\n ctx.fillRect(0, 0, canvas.width, canvas.height);\r\n});\r\n\r\nbackgroundColorPicker.addEventListener('change', () => {\r\n ctx.fillStyle = backgroundColorPicker.value;\r\n ctx.fillRect(0, 0, canvas.width, canvas.height);\r\n});","user_id":"24c8783e-8cfd-47f1-ac9f-ac9a07eeaa73","project_key":"82yYAj","description":"Minimal Drawing Board\r\n","plugins":[{"css":{"tailwind":false,"bootstrap":false,"fontawesome":false,"materialicons":false,"googlefonts":false,"bulma":false},"js":{"animejs":false,"gsap":false,"motionone":false,"threejs":false,"velocity":false,"popmotion":false,"scrollreveal":false}}],"public":true,"config":{"tags": [], "babelActive": false, "cssProcessor": false, "userImportedJS": [], "typescriptActive": false},"tags":[],"hide_js":false,"hide_css":false,"messages":[],"view":[{"views":491}],"profiles":{"username":"nuur"}}]

Draw.