オンラインお絵かきボード:フリーハンド描画と PNG 保存

色と太さを選び、マウスまたは指で描きます。「元に戻す」1 回で直前のストロークがまるごと消え、「PNG を保存」で白背景の 1000 × 500 PNG としてダウンロードできます。描いた内容はページ内にとどまり、送信されません。

ブラウザ内でローカルに実行

描いて保存する手順

色と線の太さを選び、マウスまたは指で描きます。押して動かすたびに 1 本のストロークになるので、「元に戻す」1 回で直前の線がまるごと消えます。

描いた内容はこのページ内にとどまり、アップロードも保存もされないため、再読み込みすると消えます。「PNG を保存」は白い 1000 × 500 のキャンバスに描き直して kivtools-drawing.png としてダウンロードします。

  1. ツールバーの上段で色を、下段で線の太さを選びます。
  2. 白いキャンバスをマウス、トラックパッド、指で描きます。押したまま動かすと連続した線になります。
  3. 「元に戻す」(Ctrl+Z)で直前のストロークを、「キャンバスを消去」でボード全体を消します。どちらも点ではなくストローク単位で働きます。
  4. 「PNG を保存」(Ctrl+S)を押すと、白背景の 1000 × 500 PNG として kivtools-drawing.png がダウンロードされます。

このボードの動作

1 ストローク=1 回の取り消し

「元に戻す」はストローク単位です。押して、動かして、離すまでが 1 回なので、長い線も部分的に消えるのではなく 1 クリックでなくなります。Ctrl+Z と Cmd+Z はボタンと同じ動作です。

「キャンバスを消去」はこの履歴も空にします。消去後に「元に戻す」を押しても、以前のストロークは戻りません。

保存される PNG の中身

「PNG を保存」はストロークを新しい白い 1000 × 500 のキャンバスに描き直してダウンロードします。ファイルに入るのは描画だけで、カーソルの跡、ツールバー、ページの背景は含まれません。

Ctrl+S も同じダウンロードに割り当てているため、ブラウザー自身の保存画面は開きません。ファイル名は常に kivtools-drawing.png です。

マウス、指、ボードの端

キャンバスはマウス、トラックパッド、タッチに対応します。ストロークはボタンを離すか指を離した時点で終わり、ボードの外で離しても同じです。押さずにキャンバスへ戻っても線は続きません。

ボードは 1000 × 500 の固定サイズで、ウィンドウ幅にかかわらず 2:1 の比率で表示されるため、画面での見た目と PNG の比率が一致します。

できないこと

やり直し、消しゴム、文字や図形のツールはありません。パレットは 8 色、線の太さは 3〜25 ピクセルの 7 段階です。

描画はページのメモリ上にあります。再読み込み、タブを閉じる、別のタブへ移動すると失われます。保存も送信も行われないためです。

最近使ったツール: