【JavaScript】Canvasでカラーピッカーを使用して、線の色を簡単に変更する方法

はじめに
実装
1. カラーピッカー
2. カラーピッカーで選択した色の値をJavaScriptで設定する
お絵かきアプリ
まとめ

はじめに

お絵かき機能を実装した際、線の色を簡単に切り替えれるようにしたかった。

実装

カラーピッカー

カラーピッカーはHTMLで表示できるinputのtype要素の一つです。

<input type="color">

<input type="color"> と記述するだけでカラーピッカーを実装できます。

カラーピッカーで選択した色の値をJavaScriptで設定する

changeイベントを使用します。

<input type="color" id="js-colorBox">

let canvas = document.getElementById('js-drawPicture');
let ctx = canvas.getContext('2d');
let lineColor = '#000000'  // 初期は黒色
const color = document.getElementById('js-colorBox');

// 色を選択したら、要素が変わって発火
color.addEventListener('change', ()=> {
  // 選択中の色はinput要素.valueで受け取れる。
  lineColor = color.value;
  // 線の色を適用
  ctx.strokeStyle = lineColor;
});