Klecks is the official open-source release of the community-funded online painting app Kleki.

Overview

Klecks

Klecks (German for "splash of color", pronounced "clex") is the official open-source release of the community-funded online painting app Kleki. Klecks and Kleki are by developer/artist bitbof. Klecks offers the same features as Kleki but might diverge slightly in the future.

Klecks was originally written in JavaScript and made the switch to TypeScript in December 2021. It uses Parcel as a bundler. Glfx.js is used for the filters. Ag-psd is used for PSD import/export.

Klecks can either run in standalone mode (e.g. on kleki.com), or as an embed (e.g. on 2draw.net). The embed can be included on an existing page, and used for something like a drawing community where people draw and revise their works with Klecks, which are then uploaded. Using it inside of an iframe is not recommended due to various browser bugs.

For a demo and list of features visit kleki.com/home. For future plans check here: kleki.com/about.

Commands

  • initialize via npm install (requires node and npm to be installed already)
  • npm run start - dev server (to run it locally)
  • npm run build - build standalone into /dist/
  • npm run build:embed - build of embed into /dist/

Embed

Example usage of the embed can be found under: /examples/embed/

Contribute

Klecks and Kleki are community funded. Donate today

License

bitbof © 2022 - Released under the MIT License. Icons by bitbof are public domain (excluding the Klecks logo).

If you wish to say you're using "Kleki" and use its branding you must acquire a license from bitbof. You are free to say you're using "Klecks".

Comments
  • Additions and corrections for Japanese and Chinese translations

    Additions and corrections for Japanese and Chinese translations

    Translated the added items into Japanese and Traditional Chinese. I also adjusted the Simplified Chinese translation to be the same as Traditional Chinese. This is because Simplified Chinese and Traditional Chinese basically have the same word, only the shape of the letters is different. For verification, I installed the Simplified Chinese version of Paint Tool SAI and used it as a reference.

    • Clipboard.

    剪贴板 - 维基百科,自由的百科全书 "剪贴板" and "剪贴簿" are posted on Wikipedia. Also, The term used in Simplified Chinese version of Paint Tool SAI is "剪贴板".

    • "至" and "到" have the same meaning. "至" is a formal expression.

    • Brush size The term used in Simplified Chinese version of Paint Tool SAI is "画笔大小"

    • Blending The term used in Simplified Chinese version of Paint Tool SAI is "水分量"

    • submit Google 翻訳 There is also a "送出" in the Chinese HTML example. Traditional Chinese, which was translated the other day, also uses "送出".

    • Copied The English translation of the "已粘贴" is probably "paste". The translation of Traditional Chinese is "已複製", so I replaced it with Simplified Chinese. Simplified Chinese "已复制".

    Please tell me your opinion.

    opened by satopian 13
  • Firefox user agent detection prevents users to benefit from pressure drawing.

    Firefox user agent detection prevents users to benefit from pressure drawing.

    On https://github.com/webcompat/web-bugs/issues/99826#issuecomment-1061461720

    @dholbert determined there was user agent detection against Firefox which removed the ability for Firefox users to use the pressure for affecting the drawing.

    Could you fix it?

    opened by karlcow 12
  • Translatited Traditional Chinese

    Translatited Traditional Chinese

    I just replaced the Chinese characters in Simplified Chinese with Traditional Chinese. However, when I translated it further into Japanese, there was an incorrect part, so I replaced it with another term. Since native Chinese cannot be used, I corrected Chinese → Japanese → Chinese with Google Translate. I also looked it up on Wikipedia in Chinese. If you have any opinions about translation, please let me.

    The following parts used words other than the Simplified Chinese translation.

        'brush-size': {
            original: 'Size',
            value: '筆刷尺寸'
        },
        'brush-blending': {
            original: 'Blending',
            value: '水分量'
        },
        'file-copy-title': {
            original: 'Copy To Clipboard',
            value: '複製至剪貼簿'
        },
        'cropcopy-title-copy': {
            original: 'Copy To Clipboard',
            value: '複製至剪貼簿'
        },
        'cropcopy-btn-copy': {
            original: 'To Clipboard',
            value: '至剪貼簿'
        },
        'cropcopy-copied': {
            original: 'Copied.',
            value: '複製了'
        },
        submit: {
            original: 'Submit',
            value: '送出'
        },
        'submit-title': {
            original: 'Submit Drawing',
            value: '送出圖像'
        },
        'submit-prompt': {
            original: 'Submit drawing?',
            value: '您要送出嗎? '
        },
        'submit-submitting': {
            original: 'Submitting',
            value: '送出中'
        },
    
    
    opened by satopian 5
  • Browser back occurs with pen gesture

    Browser back occurs with pen gesture

    220401_ペンジェスチャー

    When I open the "edit" menu and move the pen from left to right, it returns to the previous screen. This only happened in the latest version, not in a slightly older version.

    opened by satopian 5
  • Pen brush lines jagged in Chrome

    Pen brush lines jagged in Chrome

    Something changed in Chrome with an update. Pen brush lines look bad now. I guess Chromium attempting to optimize context.arc.

    Chrome 106.0.5249.119 MacOS image

    Firefox 105.0.3 MacOS image

    Same problem on other drawing sites. Another reason to stay away from Canvas API.

    bug chromium 
    opened by bitbof 4
  • issues with the embedded version of Klecks + iPad.

    issues with the embedded version of Klecks + iPad.

    A community user has reported an issue with the embedded version of Klecks + iPad. "submit" it from him iPad, but there was a didn't work. The the screen "Submit drawing?" Is displayed, and then there is no response. I tried sending it in a short time without taking time, but it doesn't seem to work. There is no issues with Windows10 + Chrome. POTI-board ↑ Board that can be used for testing.

    opened by satopian 4
  • Japanese translation.

    Japanese translation.

    Translated into Japanese. I translated some words by meaning, not by the word itself. Tilt shift is translated as "depth of field". This is because it is easier for Japanese people to understand. Please point out if there is a problem with the translation.

    image image

    I'm sorry to add it later. That's all.

    opened by satopian 4
  • In examples/ embed /, there is only an example of how to save the image locally.

    In examples/ embed /, there is only an example of how to save the image locally.

    Hello. There were many users of this app on 2Draw.net. Therefore, I wanted to use embed version and use it like 2Draw.net. However, the example only has an example of submit → (PNG / PSD) download. I managed to post them with ajax and save them on the server, but I don't know how to load the PSD data from the server to correct the picture I drew. 2Draw.net seems to implement them with a concise source, but it doesn't work even if I write it in the same way. How can I load the PSD data into a layer? It is the task of modifying the data once stored on the server. If I can load into a layer and post from there, I can do what I want to do. If you can tell me, thank you.

    https://paintbbs.sakura.ne.jp/cgi/neosample/petitnote/ ↑ An electronic bulletin board where i can draw and post pictures with klecks. However, i cannot edit the picture i drew at this time.

    opened by satopian 4
  • A couple of smol suggestions (with pictures :D)

    A couple of smol suggestions (with pictures :D)

    fill alpha concept Fill-tool with Alpha paint! Selecting "Eraser" enables this feature, opacity would influence how much alpha is added (similar to shape eraser opacity). Tolerance works the same.

    selection tool concept Basic selection tool, explanation and functions in the picture above

    Bigger stuff This always bothered me, especially on smaller screens. precise scaling and perspective and the whole Editing page in general could use a bigger interface. This especially helps when trying to scale layers with small content.

    Shape lock alpha Almost every tool has Lock Alpha. But the shape tool does unfortunately not. Having L.A. on the shape tool offers cleaner geometrical drawing. For example one wants to draw a tin can, but getting those curved lines is difficult. Using a circle tool with L.A. can help in this scenario.

    Thanks for reading!

    enhancement 
    opened by SnailPerson 3
  • kleki issue

    kleki issue

    so I was drawing and then randomly my menu just grew I don't wether this was intented or not but if you could fix this issue or tell me how to fix it thank you.

    opened by KLEKIUSER 3
  • Different Shades

    Different Shades

    So I have been getting a problem where I draw over one color with the same color then I get a lighter shade of that color and I can't figure out how to fix it.

    opened by IrishPug 3
  • Massive pixel errors when using

    Massive pixel errors when using "Edit" (with pictures)

    This came with the newest 0.5.11 update. This Bug is related to Safari, it does not show up in other browsers like Chrome.

    How to recreate: Black background + extra layer. Apply the new fade tool with any color on the alpha layer and then try to edit it (Blur, Sharpen, Distort, To Alpha, Tilt Shift, Brightness, Hue, etc.)

    step1 Step one step 2 Edit with any tool in the "Edit" category. step 3 Witness the errors, look at those rebellious conservative pixels, not wanting to be edited bug safari 
    opened by SnailPerson 1
  • iPadOS: exceeding 480MB canvas limit

    iPadOS: exceeding 480MB canvas limit

    With 16 layers of 2048 * 2048 px, Klecks/Kleki is capable of reaching the 480MB canvas limit that iPadOS has. That breaks the application, as no new canvas objects can be created, or more specifically their contexts are null.

    Scenario 1 - embed - iPad

    • create new image: 2048*2048
    • add new layers until there are 16 layers
    • draw for a while, ~20 lines -> now the application will be broken

    Scenario 2 - embed - iPad

    • open an image that is 2048*2048 and has 16 layers -> the application is broken right away

    Scenario 3 - standalone - iPad

    • create new image: 2048*2048
    • add new layers until there are 16 layers
    • store to browser storage
    • reload the page -> now the application is and will remain broken until the cache (indexedDB) is cleared

    Also reloading the page will break everything much quicker because it appears that Safari keeps the page from before the reload in memory. It will fail to create even a single canvas.


    Cause

    When the application breaks, it has 32 2048*2048px canvases, or 32 * 2048 * 2048 * 4 / 1024 / 1024 = 512MB. 16 canvases which represent the current state of the image, and 16 canvases that represent the image in its earliest Undo state. Architectural changes are needed to fix this issue.

    bug 
    opened by bitbof 0
  • Invert artifacts

    Invert artifacts

    • Tested in Chrome (Win10, macOS), Does not happen in Firefox (Win10)
    • Paint with Blend brush on new layer
    • Invert that layer a lot (10+ times)
    • Artifacts will form. (Won't happen on a layer where all pixels are fully opaque)

    Looks like an issue with Chromium. -> I will create a Chromium ticket.


    Example (using this image: https://i.imgur.com/JtvO7zc.png)

    Before: 2022_03_11_0oo_Kleki

    After: 2022_03_11_0p3_Kleki

    Artifacts in detail 2022_03_11_0p4_Kleki

    It can be more pronounced than that.

    Invert shader:

    uniform sampler2D texture;
    varying vec2 texCoord;
    
    void main() {
        vec4 color = texture2D(texture, texCoord);
        gl_FragColor = vec4(1.0 - color.r, 1.0 - color.g, 1.0 - color.b, color.a);
    }
    
    bug chromium 
    opened by bitbof 0
  • Freezing during long session in Safari (iPad, Mac)

    Freezing during long session in Safari (iPad, Mac)

    Multiple users have reported that Kleki (and thereby Klecks) can freeze during a longer session (30 minutes) in Safari on iPad or Mac. When freezing occurs it's impossible to save and the page needs to be reloaded.

    I think it started around December 2021. I've yet to reproduce this myself.

    If you've experienced this issue and have a reliable way of reproducing it please provide information. Thank you.

    bug help wanted 
    opened by bitbof 7
  • Remove isFirefox

    Remove isFirefox

    When possible remove dependency on isFirefox.

    Is still used to avoid the following bugs:

    • https://bugzilla.mozilla.org/show_bug.cgi?id=1753724
    • https://bitbof.com/stuff/2022-03-08-ff-pointer-buttons/ or https://bugzilla.mozilla.org/show_bug.cgi?id=1758516
    firefox 
    opened by bitbof 0
  • Canvas glitching on: Undo, switching tabs, using eraser

    Canvas glitching on: Undo, switching tabs, using eraser

    1) The issue

    Since the end of January 2022 many reports have come in of Kleki glitching after switching tabs. All of them appear to come from ChromeOS/Chromebook users. Glitching occurs after pressing Undo, switching tabs, zooming, or when using the eraser. Glitching includes:

    • Parts of layers getting "erased"
    • Layers getting "pixelated"
    • Corners around brushstrokes getting erased
    • Drawing turning gray

    3) More details

    Example of the glitch (from here) Glitch in action And another Glitch in action

    Note the blocky erased sections.

    After buying two different Chromebooks I was finally to reproduce it myself. I created a page that provokes the Chrome glitch: https://bitbof.com/stuff/2022-04-28-intelhd400-canvas/ It is not an issue with Kleki, but Chrome.

    4) Chromium Report

    A Chromium issue has been created on Mar 24, 2022

    https://bugs.chromium.org/p/chromium/issues/detail?id=1309876#c_ts1648128675

    bug 
    opened by bitbof 12
Owner
I paint, code and mess around.
I paint, code and mess around.
Detect if a contract has been deployed in the latest (or predefined) block from an address that was previously funded through Tornado.Cash.

??️‍♂️ TORN Detector Detect if a contract has been deployed in the latest (or predefined) block from an address that was previously funded through Tor

Pascal Marco Caversaccio 14 Dec 24, 2022
A community website built by the community for the community (Hacktoberfest 2022) :tada:

Hacktoberfest 2022 ?? : Built by the community for the community! This repository is an initiative which aims to help beginners kickstart their open-s

Your First Open Source Project 5 Oct 12, 2022
A recreation of a startpage posted on Reddit without the source, so I rewrote it in Next.js + Tailwind for the open source community.

Startpage "Figma Balls" Rewrite Why Did I Make This I saw a startpage posted on the subreddit r/startpages that I thought looked nice, but when I look

Thomas Leon Highbaugh 5 Mar 29, 2022
New base script bot wa by Ramdani Official, don't forget to subscribe youtube Ramdani Official.

Requirements • Installation • Thanks to • Official Group Bot • Donate Information bahasa Indonesia Ramdani Botz V17 adalah bot yang di ciptakan oleh R

Ramdani Official 22 Nov 1, 2022
Hasbik is a community based social token and the new paradigm in the crypto space. With the goal to build a community around a crypto token.

Hasbik is a community based social token and the new paradigm in the crypto space. With the goal to build a community around a crypto token.

null 2 Jan 5, 2022
A chat logs online saver for discord bots to save messages history & cleared messages online

Chat Logs NPM package that saves messages online to view it later Useful for bots where users can save messages history & cleared messages online Supp

TARIQ 8 Dec 28, 2022
Updog is an open-source social media webapp intended to allow everyday people to share their thoughts in a welcoming community.

SE701-Updog Updog is an open-source social media webapp intended to allow everyday people to share their thoughts in a welcoming community. This proje

SE 701 Team 2 UoA 14 Apr 18, 2022
An Open Source Dev Community for Elite Developers by Ablestate Creatives Ltd.

Ablestate Dev Community Are you looking for a Developer Job in Companies in Europe, Canada and US. Get listed Fork Edit community.json Add your detail

Ablestate 6 Aug 20, 2022
Hydra bot is an open source project developed by the JavaScript community with the aim of exporting functions from WhatsApp Web to the node js

The most reliable WhatsApp tool for chatbots with advanced features. Hydra bot is an open source project developed by the JavaScript community with the aim of exporting functions from WhatsApp Web to the node js, . The most complete javascript library for Whatsapp, 100% Open Source.

Jónalan de Lima 47 Dec 25, 2022
The SheetJS Community Edition offers battle-tested open-source solution

The SheetJS Community Edition offers battle-tested open-source solutions for extracting useful data from almost any complex spreadsheet and generating new spreadsheets that will work with legacy and modern software alike.

SheetJS 32k Dec 29, 2022
The open source Community Operating System, built with developers in mind.

IMPORTANT: This project is still under active development. Be aware that future releases can lead to breaking changes. The open source Community OS, b

crowd.dev 383 Dec 29, 2022
Make a release for Jitsi test browser page (minify js/css files, pack the app in one file).

JitsiTestBrowserTool This tools allows you to make a release for Jitsi test browser page (minify js/css files, pack the app in one file). /!\ Not work

GIP Renater 4 Aug 15, 2022
Open! Inclusive! Collaborative! A community for enthusiasts exploring new technologies, working on innovative ideas and helping each other grow together. Open Issues, Raise ideas, Make Pull Requests!

About Us OplnCo previously known as Devstucom represents Open Inclusive Collaborative. We as a community help our fellow students build skills through

OpInCo Community 4 Oct 13, 2022
Free, open source game engine online

microStudio is a free, open source game engine online. It is also a platform to learn and practise programming. microStudio can be used for free at ht

Gilles 719 Dec 30, 2022
The open source embeddable online markdown editor (component).

Editor.md Editor.md : The open source embeddable online markdown editor (component), based on CodeMirror & jQuery & Marked. Features Support Standard

pandao 12.7k Dec 30, 2022
JIT Compiler is a open source online code compiler. You can run more than 40+ most popular programming languages in your browser just-in-time using jitcompiler.

JIT Compiler is a open source online code compiler. You can run more than 40+ most popular programming languages in your browser just-in-time using jitcompiler.

Rajkumar Dusad 36 Jan 5, 2023
Free open-source game cheat for Tanki Online.

shizoval Free open-source game cheat for Tanki Online. snusoedik#4769 Features AirBreak - air walk Clicker - auto use FAK/supplies/mines FPS Up - remo

null 16 Dec 24, 2022
Brickdoc is an open-source compound document-based online workspace and low-code development platform.

Brickdoc ⚠️ Note: This software is currently under active development. Some features may be available in the future, and the API and interface may cha

Brickdoc 210 Dec 20, 2022