canvas タグでお絵描き（レスポンシブ）

公開日： 2018/12/20 : html5, javascript

簡単なメモ張みたいなものが欲しいので作ってみました。
canvas のレスポンシブが少しひっかかったので、メモしておこうと思います。

canvas レスポンシブの幅・高さを調整する

canvas タグの基本

canvas は、2D グラフィックスを描く HTML5 からのタグ。

<canvas id="ID名" width="幅" height="高さ">
図形を表示するには、canvasタグをサポートしたブラウザが必要です。
</canvas>

属性は、幅・高さとグローバル属性（classなども）指定出来ます。

var canvas = document.getElementById('ID名');

Javascript では、このようにキャンバスを取得します。

canvas の幅と高さを CSS で指定する

CSS からでも幅・高さの指定は可能です。

<style>
#canvas{
   width: 80%;
   height: 70vh;
}
</style>
.....（省略）......
<canvas id="canvas"></canvas>

今回は可変にしたいので、パーセントで指定。

// canvas の幅と高さの指定
var canvas = document.getElementById('canvas');
canvas.width = canvas.clientWidth;
canvas.height = canvas.clientHeight;

その場合は、Javascript の方で width と height を指定します。

canvas の背景色を塗りつぶす

描画には Javascript で、コンテキストを取得します。

// canvas を白で塗りつぶす
var ctx = canvas.getContext('2d');
ctx.fillStyle = "#fff";
ctx.fillRect(0, 0, canvas.clientWidth, canvas.clientHeight);

fillRect()は塗りつぶしのメソッドで、引数は（座標X, 座標Y, 幅, 高さ）です。

canvas で線を描く

canvas タグで線を描くには座標を使います。

var context = canvas.getContext('2d');
context.beginPath();//パスのリセット
context.moveTo(座標X, 座標Y);//線の開始座標
context.lineTo(座標X, 座標Y);//線の終了座標
context.stroke();//線の表示
context.closePath();//パスを閉じる

あとは、マウスイベントでこの線を描いていけば、お絵かきっぽくなります。
参考サイト
 DEMO を見る

canvas レスポンシブで線がずれる

canvasの位置・大きさを取得

マウスイベントはウィンドウの左上端からの座標です。
canvas 幅が 80% なので、そこに線を描くとずれています。

// canvasの位置・大きさを取得
var clientRect = canvas.getBoundingClientRect();
var canvas_x = clientRect.left;
var canvas_y = clientRect.top;

座標を取得して、引いて調整。

// マウスダウンイベント内
startX=e.pageX-canvas_x;
startY=e.pageY-canvas_y;
・・・・・・・・・
// マウスムーブイベント内
if(mousedown)draw(e.pageX-canvas_x,e.pageY-canvas_y);

canvas がレスポンシブで劣化する

ウィンドウリサイズ時、絵が伸縮してしまうため、キャンバスの大きさも指定しなおしました。

//ウィンドウリサイズ時
window.addEventListener('resize', function (event) {
	// canvasの位置座標を取得（描いたものを伸縮させないため、キャンバスの大きさを変える）
	clientRect = canvas.getBoundingClientRect();
	canvas_x = clientRect.left;
	canvas_y = clientRect.top;
	canvas.width = canvas.clientWidth;
	canvas.height = canvas.clientHeight;
});

しかし、描画後に width・height を指定しなおすと、消えてしまいます。

線を描き終わるたびに、canvas データーを保存しておき、ウィンドウリサイズ時に、描画しなおすことにしました。

canvas データーを保存する

ctx.getImageData(座標X,座標Y,幅,高さ);

canvas 保存したデータを描画する

ctx.putImageData(データ, 座標X, 座標Y);

ここまでのお絵かき部分はこんな感じです。
DEMO を見る
スマホで縦線を描くと、スクロールしてしまうみたいで（多分ウィンドウがリサイズしてガタガタしている）描画が消えてしまうので、CSSでスクロールしないようにしたら治りました。

// スクロールしないようにする
html,body{
overflow: hidden;
}

canvas を画像にして、保存する（ダウンロード）

あと消すボタンと、保存ボタンを付けようと思います。

canvas を消す（クリア）する

ctx.clearRect(座標X,座標Y,幅,高さ);

今回はこのメソッドは使わず、背景白なので、fillRect()で塗りつぶしにしました。

canvas をJPEG 画像に変換する

var base64 = canvas.toDataURL('image/jpeg');

この辺りからは難しいので、参考サイトをまんま使わせてもらいます。

canvas をダウンロードさせる

// カンマで分割し、base64データの文字列をデコード
var tmp = base64.split(',');
var data = atob(tmp[1]);
// tmp[0]の文字列（data:image/png;base64）からコンテンツタイプ（image/png）部分を取得
var mime = tmp[0].split(':')[1].split(';')[0];
//  1文字ごとにUTF-16コードを表す 0から65535 の整数を取得
var buf = new Uint8Array(data.length);
for (var i = 0; i < data.length; i++) buf[i] = data.charCodeAt(i);
// blobデータを作成
var blob = new Blob([buf], { type: mime });
saveBlob(blob, 'memo.jpg');

完成デモはこちら。
DEMO を見る