さくっと使えるお絵かきソフトが欲しい
工作系のアイデアを練るときとかで、ちょっとお絵かきをしたいときがあります。
紙とペン、iPadとスタイラスでもいいのですが、どっちも使いたいときに限って見当たらなかったりします。
いつも確実に同じところにあるのはPCです。高機能なグラフィックソフトは、いらないから、ぱっと起動してすぐにお絵かきできるソフトが欲しくて作りました。
ブラウザのブックマークに入れておけば速攻で起動してすぐに描けます。
このアプリの機能は線の色と太さの変更、消しゴム、そしてダウンロードの機能のみです。
アイデアを練るようなときはこの程度で十分です。清書したいときには別の高機能ソフトを使えばよいでしょう。
fabric.jsライブラリを使っています。本アプリで使ってる機能は以下の記事にあります。
-
-
fabric.jsのfree drawingの基本機能まとめ
htmlのcanvas要素を拡張してくれるfabric.jsでお絵かきをするための基本機能をまとめました
続きを見る
-
-
canvas要素にcssでborderを付けるとfabric.jsのフリードローイングがズレる件
fabric.jsのフリードローイング機能を使ったwebアプリを作っているときに、canvas要素にcssでborderを付けると描画がズレてしまったので対策をメモりました
続きを見る
ソースコードはこんな感じです。HTMLにまとめてあります。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#wrap-all {
margin-left: 20px;
}
#canvas-container {
border: 5px solid black;
width: 1000px;
}
.radio-wrapper {
margin: 10px;
}
input[type='radio'] {
transform: scale(2);
position: absolute;
top: 0;
bottom: 0;
left: 0;
margin: auto;
}
label {
font-size: 150%;
position: relative;
padding-left: 1em;
padding-right: 1em;
}
button {
font-size: 150%;
border: 1px solid black;
background-color: #ededed;
padding: 5px;
vertical-align: middle;
margin-left: 10px;
}
.selected {
border: 5px solid black;
}
button.active {
background-color: #888;
}
.color {
color: white;
}
.color1 {
background-color: red;
}
#red {
background-color: red;
}
#green {
background-color: green;
}
#orange {
background-color: orange;
}
#blue {
background-color: blue;
}
#black {
background-color: black;
}
#darkgrey {
background-color: rgb(77, 77, 77);
}
#grey {
background-color: rgb(105, 105, 105);
}
#lightgrey {
background-color: rgb(167, 167, 167);
}
#white {
background-color: white;
color: black;
}
#eraser {
background-color: white;
color: black;
}
</style>
</head>
<body>
<div id="wrap-all">
<button id="black" class="color selected">Black</button>
<button id="darkgrey" class="color">Dark</button>
<button id="grey" class="color">Gray</button>
<button id="lightgrey" class="color">Light</button>
<button id="white" class="color">White</button>
<button id="red" class="color">Red</button>
<button id="orange" class="color">Orange</button>
<button id="blue" class="color">Blue</button>
<button id="eraser" class="color">ERASER</button>
<button id="clear">Clear</button>
<button id="download">Download</button>
<div class="radio-wrapper">
<label><input type="radio" id="5px" class="selectLineWidth" name="lineWidth" value="5" checked>5px</label>
<label><input type="radio" id="10px" class="selectLineWidth" name="lineWidth" value="10">10px</label>
<label><input type="radio" id="20px" class="selectLineWidth" name="lineWidth" value="20">20px</label>
<label><input type="radio" id="40px" class="selectLineWidth" name="lineWidth" value="40">40px</label>
</div>
<br>
<div id="canvas-container"><canvas id="canvas"></canvas></div>
</div>>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/4.2.0/fabric.min.js"></script>
<script>
const CANVAS_WIDTH = 1000;
const CANVAS_HEIGHT = 1000;
let LineWidthSave = 5;//消しゴムを使った後で元のペンサイズに戻すための記録用
var canvas = new fabric.Canvas("canvas");
canvas.setHeight(CANVAS_HEIGHT);
canvas.setWidth(CANVAS_WIDTH);
canvas.setBackgroundColor('rgba(255, 255, 255, 1)', canvas.renderAll.bind(canvas));
canvas.isDrawingMode = true; // お絵かきモードの有効化
canvas.freeDrawingBrush.color = "rgb(0,0,0)"; // 描画する線の色、初期値
canvas.freeDrawingBrush.width = 5; // 描画する線の太さ
//色選択ボタンの設定
const selectColorBtn = document.getElementsByClassName('color');
for (i = 0; i < selectColorBtn.length; i++) {
selectColorBtn[i].addEventListener('click', function (e) {
//ボタンが自分の色を取得して描画色にする
const btnColor = window.getComputedStyle(this, null).getPropertyValue('background-color');
console.log(btnColor);
canvas.freeDrawingBrush.color = btnColor; // 描画する線の色
canvas.freeDrawingBrush.width = LineWidthSave;
clearSelectedButton();
this.classList.add('selected');//選択されたボタンはボーダーを太くする
});
}
const selectLineWidthBtn = document.getElementsByClassName('selectLineWidth');
for (i = 0; i < selectLineWidthBtn.length; i++) {
selectLineWidthBtn[i].addEventListener('click', function (e) {
//ボタンが自分の値を取得してペンサイズにセット
canvas.freeDrawingBrush.width = parseInt(this.value);
LineWidthSave = parseInt(this.value);
});
}
function clearSelectedButton() {
const btn = document.getElementsByClassName('color');
for (i = 0; i < btn.length; i++) {
btn[i].classList.remove('selected');
}
}
document
.getElementById("download")
.addEventListener('click', function (e) {
let canvasToDL = document.getElementById("canvas");
let link = document.createElement("a");
link.href = canvasToDL.toDataURL("image/png");
link.download = "drawing.png";
link.click();
});
document.getElementById('eraser') //消しゴムはサイズの大きい白いペン
.addEventListener('click', function (e) {
canvas.freeDrawingBrush.width = 40;
canvas.freeDrawingBrush.color = 'white';
});
document
.getElementById('clear')
.addEventListener('click', () => {
canvas.clear();
canvas.setBackgroundColor('rgba(255, 255, 255, 1)', canvas.renderAll.bind(canvas));
});
</script>
</body>
</html>
今後の拡張のためにcssとjavascriptを分離しました。以前から愛用している「ちょいメモ」に組み込むために、不要な時には隠せるボタンを付けています。
-
-
一番使ってる自作アプリ、保存できないメモ「ちょいメモ」
ちょっとテキストを書いたりコピペしたいんだけど、エディタやワープロを立ち上げるのもかったるい。というときにブラウザ上でさくっとメモが取れるWebアプリです。保存機能がないが特徴。単純なコードなので欲しい機能は自分でどんどん追加できます
続きを見る
See the Pen
Simple Free Hand Drawing Using fabric.js by Ryoji Kimura (@ryjkmr)
on CodePen.
ドットカーソルにして描きやすくした
その後、ブラシの色とサイズが分かるドットカーソルにして使いやすくしました。
-
-
お絵かきアプリにブラシサイズと色が反映されるドットカーソルを追加した
自作のお絵かきWebアプリを使いやすくするために、現在のブラシサイズと色が分かるドットカーソルを作ってみました
続きを見る