Fiz o proposto, porem, depois pensei em colocar mais cores, coloquei uma tabela de cores que joga a cor selecionada pro pincel(ctx). depois tambem quis mudar o formato e coloquei um botao simples pra mudar a forma (pensei em usar um input de form pra selecionar as formas, mas nao consegui), usando a mesma logica dava pra criar funcao pra aumentar o tamanho e etc. por fim o botao direito do mouse ficou como uma borracha.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.color-cell {
color: white;
display: flex;
height: 40px;
}
</style>
</head>
<body style= display:flex;>
<table>
<thead>
<tr>
<th width="150">Cor selecionada</th>
</tr>
</thead>
<canvas id="canvas" width="600" height="600"></canvas>
<td class="color-cell" id="selected-color";> </td>
<button style="
width: auto;
height: 25px;"> Formato</button>
<form action="#" style="clear: both;">
<label for="corum">Cor 1</label>
<input type="color" id="corum" onchange="trocaCor();">
</form>
<table>
<script>
//canva
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
function trocaCor(){
var cor = document.getElementById("corum").value;
ctx.fillStyle = cor;
return cor
}
// desenhar//
function desenhaCirculo(evento) {
var x = event.layerX;
var y = event.layerY;
ctx.beginPath()
ctx.arc(x, y, 10, 0, 2 * 3.14)
ctx.fill()
console.log(x + ',' + y)
}
function desenhaQuadrado(evento){
var x = event.layerX;
var y = event.layerY;
ctx.fillRect (x,y,20,20);
console.log(x + ',' + y)
}
//mudar formato//
var formato = 0;
function mudaFormato(){
formato++
if(formato == 1 ){
canvas.onclick = desenhaQuadrado;
}
if (formato > 1){
formato = 0;
canvas.onclick = desenhaCirculo;
}
}
var desenho = document.querySelector("button");
desenho.onclick = mudaFormato;
canvas.onclick = desenhaCirculo;
//borracha////
var borracha = 'white'
function apagar() {
ctx.fillStyle = borracha
ctx.fillRect(550, 0, 50, 50)
return false
}
canvas.oncontextmenu = apagar
</script>
</body>
</html>