Não sei se é o mais adequado, mas pra mim foi menos complicado.
<meta charset="utf-8">
<canvas width="600" height="400"></canvas>
<script>
function drawSquare(x,y,size,color) {
paint.fillStyle=color;
paint.fillRect(x,y,size,size);
paint.fill();
}
function drawCircle(x,y,radius,color) {
paint.fillStyle=color;
paint.beginPath();
paint.arc(x,y,radius,0,2*Math.PI);
paint.fill();
}
function drawColorPalette() {
drawSquare(xRed,ySquare,squareSize,"red");
drawSquare(xGreen,ySquare,squareSize,"green");
drawSquare(xBlue,ySquare,squareSize,"blue");
}
function mouseMove(event) {
var x=event.pageX-canvas.offsetLeft;
var y=event.pageY-canvas.offsetTop;
if(x>=0 && x<3*squareSize+5 && y>=0 && y<squareSize+5) {
return
} else if (draw) {
drawCircle(x,y,5,currentColor);
}
}
function enableDraw() {
draw=true;
}
function disableDraw() {
draw=false;
}
function changeColor(event) {
var x=event.pageX-canvas.offsetLeft;
var y=event.pageY-canvas.offsetTop;
if (x<50 && y<50) {
currentColor="red";
} else if (x>50 && x<100 && y<50) {
currentColor="green";
} else if (x>100 && x<150 && y<50) {
currentColor="blue";
}
}
var canvas=document.querySelector("canvas");
var paint=canvas.getContext("2d");
paint.fillStyle="lightgrey";
paint.fillRect(0,0,600,400);
var draw=false;
var currentColor="blue";
var xRed=0;
var xGreen=50;
var xBlue=100;
var ySquare=0;
var squareSize=50;
drawColorPalette();
canvas.onclick=changeColor;
canvas.onmousemove=mouseMove;
canvas.onmousedown=enableDraw;
canvas.onmouseup=disableDraw;
</script>
