Canvasにマウスでお絵描きするサンプル

<canvas>にマウスでお絵描きする簡単なサンプルを作ってみました。

Canvasにお絵描きするサンプル
http://code.rlated.net/html5/canvas.html

サンプルではjQueryを使っていますが、複雑なことはしていませんので、jQueryを使わない場合の実装にも参考にできるかなと思います。

線を引く・線を消す

まずはマウスボタンを押した位置と離した位置の座標が必要になると思います。offsetX/offsetYを使って次のような感じで実装できます。

$('canvas').mousedown(function(ev){
  x = ev.offsetX;
  y = ev.offsetY;
);

$('canvas').mouseup(function(){
  x = null;
  y = null;
});

続いて、マウス移動中の座標を取得し、前回取得した座標から現在の座標まで線を引いてみます。

$('canvas').mousemove(function(ev){
  if (x != null && y != null) {
    context.beginPath();
    context.moveTo(x, y);
    context.lineTo(ev.offsetX, ev.offsetY);
    context.stroke();

    x = ev.offsetX;
    y = ev.offsetY;
  }
});

ここまでできたら、えんぴつを選択している場合は黒色、消しゴムを選択している場合は白色とすることで、お絵描きソフト風の動作が実装できます。

$('#write').click(function(){
  context.strokeStyle = '#555';
  context.lineWidth = 1;
});

$('#erase').click(function(){
  context.strokeStyle = '#fff';
  context.lineWidth = 20;
});

ファイルのダウンロード

お絵描きした画像をダウンロードしたい場合はtoBlobを使って次のように実装できます。（ただし、ブラウザによっては動作しない場合もありますので注意してください。）

$('#save').click(function(ev){
  canvas.toBlob(function(blob){
    var url = window.URL.createObjectURL(blob);
    var $a = $('<a>').attr('href', url).attr('download', 'canvas.png');
    $a.get(0).click();
    $a.remove();
  }, 'image/png');
});

まとめ

カラーパレットを用意したり、線の太さを変えたりしたい場合も、今回のサンプルコードをベースに実装を始められるかなと思います。

コード全体を確認したいという場合はデモページを右クリックしてソースコードを確認してみてください。

Canvasにお絵描きするサンプル
http://code.rlated.net/html5/canvas.html