Webアプリを作りたいなと思いながらなんとなーく先延ばしにしてたところ
初心者向けのJavaScript，HTML，CSSを使ったワークショップを見つけたので参加してみました。
その時作ったお絵かきアプリに機能を追加してペンの太さ・ペンの色の変更・画面の全消しができるようにしてます．

動作環境

あんまりよくわかってないけどCodeSandboxにsign inしてVanillaを使って作りました笑

おそらく…
・CodeSandbox
・Vanilla
・HTML
・JavaScript
・CSS
があればできるんだと思います．
違ってたらすみません．

やること

１．HTMLで部品を作ります

今回はお絵かきする部分とボタンを作成しました．

<!DOCTYPE html><html><head><title>Parcel Sandbox</title><metacharset="UTF-8"/></head><body><divid="app"></div><!--お絵かきする画面を消すボタン--><div><buttonid="pen-ss">極細</button><buttonid="pen-s">細</button><buttonid="pen-m">中</button><buttonid="pen-l">太</button><buttonid="pen-ll">極太</button></div><!--お絵かきするところ--><div><canvasid="draw-area"width="400px"height="400px"style="border: 1px solid #000000"></canvas></div><!--色を変えるボタン--><div><buttonid="color-red">赤</button><buttonid="color-blue">青</button><buttonid="color-green">緑</button><buttonid="color-black">黒</button><buttonid="eraser">消しゴム</button><buttonid="clear-button">全消し</button></div><script src="src/index.js"></script></body></html>

おそらくこんな感じになるかと…

これでは動かないのでJavaScriptさんに動かしてもらいましょう

２．JavaScriptの登場

特にどうってこともないのでコード載せます

import"./styles.css";constcanvas=document.querySelector("#draw-area");constcontext=canvas.getContext("2d");canvas.addEventListener("mousemove",event=>{draw(event.layerX,event.layerY);});canvas.addEventListener("touchmove",event=>{draw(event.layerX,event.layerY);});//パソコンでクリックしてる間だけ描けるようにした機能canvas.addEventListener("mousedown",()=>{context.beginPath();isDrag=true;});canvas.addEventListener("mouseup",()=>{context.closePath();isDrag=false;});//スマホで描けるようにする機能canvas.addEventListener("touchstart",()=>{context.beginPath();isDrag=true;});canvas.addEventListener("touchend",()=>{context.closePath();isDrag=false;});//お絵かきするところをきれいにする機能constclearButton=document.querySelector("#clear-button");clearButton.addEventListener("click",()=>{context.clearRect(0,0,canvas.width,canvas.height);});//ペンの色を変える機能constcolorRed=document.querySelector("#color-red");colorRed.addEventListener("click",()=>{context.strokeStyle="red";});constcolorBlue=document.querySelector("#color-blue");colorBlue.addEventListener("click",()=>{context.strokeStyle="blue";});constcolorGreen=document.querySelector("#color-green");colorGreen.addEventListener("click",()=>{context.strokeStyle="green";});constcolorBlack=document.querySelector("#color-black");colorBlack.addEventListener("click",()=>{context.strokeStyle="black";});//消しゴムの機能consteraser=document.querySelector("#eraser");eraser.addEventListener("click",()=>{context.strokeStyle="white";});//ぺんの太さを変える機能constpenSS=document.querySelector("#pen-ss");penSS.addEventListener("click",()=>{context.lineWidth=1;});constpenS=document.querySelector("#pen-s");penS.addEventListener("click",()=>{context.lineWidth=5;});constpenM=document.querySelector("#pen-m");penM.addEventListener("click",()=>{context.lineWidth=10;});constpenL=document.querySelector("#pen-l");penL.addEventListener("click",()=>{context.lineWidth=15;});constpenLL=document.querySelector("#pen-ll");penLL.addEventListener("click",()=>{context.lineWidth=20;});letisDrag=false;//線をかく機能functiondraw(x,y){if(!isDrag){return;}context.lineTo(x,y);context.stroke();}

ここまでできればとりあえず動きます
デザインにも凝りたいって方はCSSをいじってください

３．CSSでも書きますか

今回はこだわりがなかったのでとりあえず実装しました程度です

/*お絵かきするところからはみ出た部分を隠してみた*/body{overflow:hidden;}

完成

できました！
一応完成したやつのURL載せときます
パソコンでもスマホでも動くようにしました．
Androidで動くかはわかんないです
完成版