Olá Cezar,
Notei algumas coisas que precisavam ser mudadas, primeiro a função sorteiaNumero não faz nenhuma mudança no dado, ela só sorteia um número para o dado, a mudança do dado é executada pelo código abaixo, contudo ele não pode ser invocado depois da execução inicial porque não está em uma função.
Eu ajustei isso colocando ele na própria função e adaptando as funções de um a seis para que elas recebessem o objeto pincel para usar.
Por fim adicionei a função como listener do evento onclick do botão de rolagem.
<meta charset="UTF-8">
<canvas width="50" height="50"></canvas></br>
<button>Rola o dado</button>
<script>
function sorteiaNumero() {
return Math.round(Math.random() * 6);
}
function um(pincel) {
pincel.fillStyle = "red";
pincel.beginPath();
pincel.arc(25, 25, 5, 0, 2 * 3.14);
pincel.fill();
}
function dois(pincel) {
pincel.fillStyle = "red";
pincel.beginPath();
pincel.arc(10, 25, 5, 0, 2 * 3.14);
pincel.fill();
pincel.fillStyle = "red";
pincel.beginPath();
pincel.arc(40, 25, 5, 0, 2 * 3.14);
pincel.fill();
}
function tres(pincel) {
pincel.fillStyle = "red";
pincel.beginPath();
pincel.arc(10, 10, 5, 0, 2 * 3.14);
pincel.fill();
pincel.fillStyle = "red";
pincel.beginPath();
pincel.arc(25, 25, 5, 0, 2 * 3.14);
pincel.fill();
pincel.fillStyle = "red";
pincel.beginPath();
pincel.arc(40, 40, 5, 0, 2 * 3.14);
pincel.fill();
}
function quatro(pincel) {
pincel.fillStyle = "red";
pincel.beginPath();
pincel.arc(10, 10, 5, 0, 2 * 3.14);
pincel.fill();
pincel.fillStyle = "red";
pincel.beginPath();
pincel.arc(40, 10, 5, 0, 2 * 3.14);
pincel.fill();
pincel.fillStyle = "red";
pincel.beginPath();
pincel.arc(10, 40, 5, 0, 2 * 3.14);
pincel.fill();
pincel.fillStyle = "red";
pincel.beginPath();
pincel.arc(40, 40, 5, 0, 2 * 3.14);
pincel.fill();
}
function cinco(pincel) {
pincel.fillStyle = "red";
pincel.beginPath();
pincel.arc(10, 10, 5, 0, 2 * 3.14);
pincel.fill();
pincel.fillStyle = "red";
pincel.beginPath();
pincel.arc(40, 10, 5, 0, 2 * 3.14);
pincel.fill();
pincel.fillStyle = "red";
pincel.beginPath();
pincel.arc(25, 25, 5, 0, 2 * 3.14);
pincel.fill();
pincel.fillStyle = "red";
pincel.beginPath();
pincel.arc(10, 40, 5, 0, 2 * 3.14);
pincel.fill();
pincel.fillStyle = "red";
pincel.beginPath();
pincel.arc(40, 40, 5, 0, 2 * 3.14);
pincel.fill();
}
function seis(pincel) {
pincel.fillStyle = "red";
pincel.beginPath();
pincel.arc(10, 10, 5, 0, 2 * 3.14);
pincel.fill();
pincel.fillStyle = "red";
pincel.beginPath();
pincel.arc(40, 10, 5, 0, 2 * 3.14);
pincel.fill();
pincel.fillStyle = "red";
pincel.beginPath();
pincel.arc(10, 25, 5, 0, 2 * 3.14);
pincel.fill();
pincel.fillStyle = "red";
pincel.beginPath();
pincel.arc(40, 25, 5, 0, 2 * 3.14);
pincel.fill();
pincel.fillStyle = "red";
pincel.beginPath();
pincel.arc(10, 40, 5, 0, 2 * 3.14);
pincel.fill();
pincel.fillStyle = "red";
pincel.beginPath();
pincel.arc(40, 40, 5, 0, 2 * 3.14);
pincel.fill();
}
var rolaDado = function () {
var dado = sorteiaNumero();
console.log('Numero Sorteado: ' + dado);
var tela = document.querySelector("canvas");
var pincel = tela.getContext("2d");
pincel.strokeStyle= "black";
pincel.strokeRect(0, 0, 50, 50);
if(dado == 1) {
um(pincel);
}
if(dado == 2) {
dois(pincel);
}
if(dado == 3){
tres(pincel);
}
if(dado == 4) {
quatro(pincel);
}
if(dado == 5) {
cinco(pincel);
}
if(dado == 6) {
seis(pincel);
}
}
rolaDado();
var button = document.querySelector("button");
button.onclick = rolaDado;
</script>