福野泰介の一日一創

HTMLタグを自由に拡張できる機能、HTMLElementを使ってお絵かきした絵のPNGデータを返す、input-drawタグを作りました。 <script type="module" src="https://code4fukui.github.io/input-draw/input-draw.js"></script> <input-draw color=red pen-width=20 style="display:block;border:1px solid black;width:100%;height:80vh;" id=draw></input-draw> このようにたった2行のHTMLでお絵かきコンポーネントが使えます！
color でペンの色、pen-width でペンの幅を指定可能。

run on ss.sabae.cc

「input-draw demo」
JavaScriptを使って色の変更や、ペン幅の変更に対応したお絵かきバージョンがこちら。簡単に使えますよ。スマホのタッチにも対応。マルチタッチにも対応したい！

「input-draw src on GitHub」
オープンソース。お絵かきチャット、お絵かき掲示板などなど、自由にご活用ください。

「demo-draw.js」src on GitHub
HTML Canvasを使ったいろんなコンポーネントを作ってみたい場合用のサンプル、demo-draw.js です。マウスに追従して高速軽量描画します。

links
- IchigoJamからのステップアップ、JavaScriptゲームライブラリ整備計画、egcanvas.jsでプログラミングお絵かきしよう