<canvas width="600" height="400"></canvas>>
<script>
var screen = document.querySelector('canvas');
var brush = screen.getContext('2d');
brush.fillStyle = 'lightgrey';
brush.fillRect(0, 0, 600, 400);
var colors = ['blue', 'green', 'purple', 'orange'];
var colorIndex = 0;
function drawSquare(event, raio){
var x = event.pageX - screen.offsetLeft;
var y = event.pageY - screen.offsetTop;
event.shiftKey = true;
if(event.shiftKey){
raio = 30;
}else{
raio = 10;
}
brush.fillStyle = colors[colorIndex];
brush.beginPath();
brush.arc(x, y, raio, 0, 2 * 3.14);
brush.fill();
}
screen.onclick = drawSquare;
function swithColor(){
colorIndex++
if(colorIndex >= colors.length){
colorIndex = 0;
}
return false
}
screen.oncontextmenu = swithColor;
</script>