今回の仕上がりは、こんな感じ
四角形二つと、屋根の直線二本で描いた家です。下はエディタ画面の切り抜きではなく、JS Paintの保存操作で取得したPNGそのもの。683×384px、683バイトでした。画像を押すと原寸で開けます。
色や質感を作り込む前に、図形と保存の操作を一度試すための小さな絵です。編集部がマウス操作で描き、外部の画像やAI生成画像は使っていません。
四角形と直線を使って、PNGを保存する
公式エディタを開き、左の道具へポインターを重ねます。今回の環境では日本語の名前が表示されました。「四角形」を選んで、白いキャンバスを斜めにドラッグすると家の壁が描けます。
次に「直線」を選び、壁の左上から屋根の頂点へ、頂点から右上へ二本引きます。「四角形」へ戻してドアを描けば、今回の家になります。初期の黒い線と白い背景のままで、塗りつぶしや透過設定は変更していません。
- 上の「ファイル」から「名前を付けて保存」を開きます。
- 「File name」に
little-house.pngと入力し、「Save as type」がPNG (*.png)であることを確認します。 - 表示中の「上書き保存」を押します。今回の環境ではダウンロードが始まりました。既存ファイルの上書きを求められた場合は、別名にして作業を残してください。
- ブラウザのダウンロード一覧で、名前と保存先を確認します。保存したPNGを開き、屋根とドアが残っていれば成功です。
キャンバスに絵が見えていることと、ファイルを保存できたことは別です。今回はダウンロードの完了と実ファイルを確認し、そのファイルをこのページへ掲載しました。
JPEGでもいい？ 作業を閉じても残る？
公式READMEは、JPEGでは細部が変化して塗りつぶしなどに影響する場合があるとして、PNG保存を勧めています。今回のような線画はPNGで残すと、保存前後の線を比べやすくなります。ほかの形式の保存は今回試していません。
公式はブラウザ内のバックアップも説明していますが、画像ごとに一つで、安全な保管の代わりではないと注意しています。タブを閉じる前に、自分でPNGを保存して確認する手順を取りました。複数の制作段階を残すなら、名前を変えたファイルを用意します。
無料で試せる？ 絵の利用条件は？
今回のブラウザでの描画とPNG保存は、登録・インストール・支払いなしで確認できました。ソフトウェアはMITライセンスです。これはツールのコードに関する条件で、読み込んだ他人の画像やロゴまで自由に使えるという意味ではありません。
今回は編集部の自作図形だけを描きました。このページの家のPNGはCC0で提供します。JS Paint本体や記事本文をCC0として配布するものではありません。ブラウザ画面の紹介とソフトウェア自体の再配布も区別しています。
PCで図形描画、保存ダイアログ、PNGの取得と表示を確認しました。スマホ実機での編集、透過、GIF、共同編集、デスクトップ版は未検証です。「Upload To Imgur」など外部への投稿は行っていません。最近のSNS反響も確認できていないため、流行の規模は紹介していません。星のアニメーションを作るならPiskelのGIF保存例も参考になります。