マウスで楽しめるお絵描きボードを実装する方法【drawingboard.js】

drawingboard.jsを使って、ブラウザにマウスで楽しめるお絵描きボードを実装する方法をご紹介します。
ブラウザにお絵描きソフト的なボードを実装してみます。
（古いブラウザバージョンや種類によっては表示されません）

ブラウザにマウスで楽しめるお絵描きボードを実装するCSSの記述

※drawingboard.cssファイルを読み込みます。その他は必要に応じて変更して下さい。

<link rel="stylesheet" href="css/drawingboard.css">
<style type="text/css" media="all">
<!--
body{
	margin:0;
	padding:0;
}
h1{
	text-align:center;
	font-size:18px;
	font-weight:bold;
	padding:10px 0;
	line-height:1.4em;
	text-align:center;
}
.board {
	margin: 0 auto;
	width: 300px;
	height: 300px;
}
#default-board {
	width: 700px;
	height: 400px;
}
-->
</style>

ブラウザにマウスで楽しめるお絵描きボードを実装するHTMLの記述

※お絵描きボードエリア（id=”default-board”）を用意します。id=”default-board”はデフォルトの設定です。ボードは色々カスタムができる様です。

<h1>マウスを使ってお絵描きができます。<br/>
ボードの上のツールで色・線幅変更・消しゴム等が行えます。</h1>

<div class="example" data-example="1">
	<div class="board" id="default-board"></div>
</div>

drawingboard.jsを使って、ブラウザにマウスで楽しめるお絵描きボードを実装するJavaScriptの記述

※jquery-1.10.1.min.js、drawingboard.js、board.js、control.js、color.js、drawingmode.js、navigation.js、size.js、download.js、utils.jsファイルを読み込みます。DrawingBoard.Board(お絵描きボードエリア)を設定します。その他の設定は以下「ソース元」をご参考下さい。

<script src="https://code.jquery.com/jquery-1.10.1.min.js"></script>

<script src="js/drawingboard.js"></script>
<script src="js/board.js"></script>
<script src="js/controls/control.js"></script>
<script src="js/controls/color.js"></script>
<script src="js/controls/drawingmode.js"></script>
<script src="js/controls/navigation.js"></script>
<script src="js/controls/size.js"></script>
<script src="js/controls/download.js"></script>
<script src="js/utils.js"></script>

<script data-example="1">
	var defaultBoard = new DrawingBoard.Board('default-board');
</script>

drawingboard.js：ブラウザにお絵描きボードを表示するデモページ

drawingboard.js：ブラウザにお絵描きボードを表示するデモ

ソース元：Drawingboard.js

ソース元：Drawingboard.js: a simple canvas based drawing app that you can integrate easily on your website.

　
※流用される場合は自己責任でお願いします。
　デモページタグ内のGoogleアナリティクスタグは流用しないで下さい。